اعمال نشدن border radius

سلام استاد وقتتون بخیر

ببخشید توی این قطعه کد برای اینکه بتونیم border radius رو اعمال کنیم چیکار میتونیم بکنیم؟

بوردر رو ترنسپرنت در نظر گرفتم که بتونم از گرادیان برای بوردر استفاده کنم ولی خب از اونور border radius اعمال نمیشه

سوالم اینه که حالا اگر تحت همین شرایط یه button با border radius بخایم باید چیکار کنیم ؟

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
      <button id="gradient-btn-1">Gradient Button 1</button>
</body>
</html>

css


#gradient-btn-1{
   padding: 20px 40px;   
   font-size: 1.4rem;
   box-sizing: border-box;
   background-color: #e7eef1;
   border: solid 8px transparent;
   border-image: linear-gradient(to right,purple,blue);
   border-image-slice: 1;
   color: purple ;
   transition: all 0.3s ease-in-out;
}
#gradient-btn-1:hover{
      background-image: linear-gradient(to right,purple,blue);
      color: #e7eef1;
      cursor: pointer;      
}