Create a gradient border with a border radius

Question

I have the following CSS:

a.btn.white-grad {
    background: $lgrey;
    color: #313149 !important;
    border: 1px solid #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    border-image-slice: 20;
    float: left;
    @include font-size(26);
    margin: 75px 0;
}

Adding border-radius: 5px doesn't seem to have any effect. I think this is because I'm using a border gradient... Is there a way to achieve the desired 5px border radius?

Answer 1

2023 - Single element, no pseudo-elements, no SVG, no masks.

I can't be responsible for this, I saw it on a website (I forgot the name of the website and can't find it).

• It's just a regular button with rounded corners and a gradient background
• It uses a insetbox-shadow to fill the inner white
• It has a 2px border and is actually transparent, so the edges of the button show through

body {
  background: aliceblue;
}

.gradient-border {  
  border-radius: 24px;
  padding: 6px 12px;
  background-image: linear-gradient(90deg, red 0%, blue 100%);
  /* 填充内部白色 */
  background-origin: border-box;
  box-shadow: inset 0 1000px white;
  /* 透明边框，所以按钮的边缘可以透过来显示 */
  border: 2px solid transparent;
}

<button class="gradient-border">Hello</button>

Answer 2

2021: If you want transparency, I recommend using the CSS mask method as the support is pretty good now

---

You cannot use border-radius in gradients. Here's another idea, you can rely on multiple backgrounds and adjust background-clip:

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*这是你的灰色背景*/
    linear-gradient(to right, #9c20aa, #fb3570) border-box;
  color: #313149;
  padding: 10px;
  border: 5px solid transparent;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
}

<div class="white-grad"> 这里放置一些文字</div>

<div class="white-grad"> 这里放置一些很长很长的文字</div>

<div class="white-grad"> 这里放置一些很长很长的文字<br>这里放置一些很长的文字</div>