Border Gradient with 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 do anything. I figured it's because I'm using a border gradient... is there a way for me to achieve the desired 5px border radius at all?

Answer 1

^{Also available on my website here: https://css-tip.com/border-gradient/}

If you want transparency, I recommend using the CSS mask method since the support is pretty good now.

---

You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip:

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/
    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"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>

---

CSS Mask method

Here is a different idea with CSS using mask where you will have transparency and it will also be responsive:

.white-grad {
  color: #313149;
  padding: 10px;
  display: inline-block;
  margin: 75px 0;
  position: relative;
  z-index: 0;
}
.white-grad:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 5px; /* the border thickness */
  border-radius: 15px;
  background: linear-gradient(to right, #9c20aa, #fb3570);
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;

}

<div class="white-grad"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>

With CSS variables, we can make it easy to adjust:

.white-grad {
  --b:5px;  /* border width*/
  --r:15px; /* the radius */

  color: #313149;
  padding: calc(var(--b) + 5px);
  display: inline-block;
  margin: 75px 0;
  position:relative;
  z-index:0;
}
.white-grad:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: var(--b);
  border-radius: var(--r);
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570)); 
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;
}

body {
  background:#f2f2f2;
}

<div class="white-grad"> Some text here</div>

<div class="white-grad" style="--r:20px;--b:10px;--c:linear-gradient(140deg,red,yellow,green)"> Some long long long text here</div>

<div class="white-grad"  style="--r:30px;--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"> Some long long <br>long text here</div>

<div class="white-grad"  style="--r:40px;--b:20px;--c:conic-gradient(black,orange,purple)"> Some long long <br>long text here<br> more and more more and more</div>

Related question to get a different effect: How do you apply a gradient from outer to inner, only to borders, in CSS?

---

The above examples cover also the circle shape:

.white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width: 150px;
  aspect-ratio: 1;
  position: relative;
  z-index: 0;
}

.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset: 0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  padding: var(--b);
  border-radius: 50%;
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;
}

body {
  background:#f2f2f2;
}

<div class="white-grad"></div>

<div class="white-grad" style="--b:10px;--c:linear-gradient(140deg,red,yellow,green)"></div>

<div class="white-grad"  style="--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"></div>

<div class="white-grad"  style="--b:20px;--c:conic-gradient(black,orange,purple)"></div>

Related question in case you want to apply an animation to the border: Button with transparent background and rotating gradient border

---

Also different radius shapes:

.white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width: 150px;
  aspect-ratio: 1;
  position: relative;
  z-index: 0;
}

.white-grad:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  padding: var(--b);
  border-radius: var(--r,50%);
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;
}

body {
  background:#f2f2f2;
}

<div class="white-grad" style="--r:50% 0 50% 50%;"></div>

<div class="white-grad" style="--b:10px;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"></div>

<div class="white-grad"  style="--b:8px;--r:50% 0 0;--c:linear-gradient(-40deg,black 50%,blue 0)"></div>

<div class="white-grad"  style="--b:20px;--r:50% 50% 0 0;--c:conic-gradient(black,orange,purple)"></div>

and different border thickness:

.white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width: 150px;
  aspect-ratio: 1;
  position: relative;
  z-index: 0;
}
.white-grad:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--c,linear-gradient(#9c20aa, #fb3570));
  padding: var(--b);
  border-radius:var(--r,50%);
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;
}

body {
  background:#f2f2f2;
}

<div class="white-grad" style="--b:0 0 20px 20px;--r:50% 0 50% 50%;"></div>

<div class="white-grad" style="--b:10px 0 10px 0;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"></div>

<div class="white-grad"  style="--b:8px 0px 0px 8px;--r:50% 0 0;--c:linear-gradient(40deg,black 50%,blue 0)"></div>

<div class="white-grad"  style="--b:20px 20px 0 20px;--r:50% 50% 0 0;--c:conic-gradient(pink,orange,red,pink)"></div>

---

SVG method

You can also consider SVG like below:

svg {
  width:200px;
  height:100px;
  margin:10px;
}

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
      <linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse">
         <stop stop-color="#9c20aa" offset="0"/>
         <stop stop-color="#fb3570" offset="1"/>
      </linearGradient>
   </defs>
  <rect x="5" y="5" height="100%" width="100%" style="width:calc(100% - 10px);height:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/>
</svg>

That you can apply as background:

.white-grad {
    background:url('data:image/svg+xml;utf8,<svg   xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>');
    color: #313149;
    padding:25px;
    border-radius:15px;
    display:inline-block;
    margin: 75px 0;
}

body {
  background:yellow;
}

<div class="white-grad"> Some text here</div>

<div class="white-grad"> text very loooooooooooong here</div>

And the same way as mask where you can get the gradient outside of the SVG:

.white-grad {
  color: #313149;
  padding: 25px;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
  background-size: 0 0;
  position: relative;
  z-index: 0;
}

.white-grad::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: auto;
  --mask: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="white"/></svg>');
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

body {
  background: yellow;
}

<div class="white-grad" style="background-image:linear-gradient(to right,blue,red)"> Some text here</div>

<div class="white-grad" style="background-image:linear-gradient(black,lightblue,green)"> text very loooooooooooong here</div>

<div class="white-grad" style="background-image:radial-gradient(blue,pink)"> text very<br> loooooooooooong here</div>

---

You can also use it as common element and consider position:absolute to place it around the text:

.white-grad {
  color: #313149;
  padding: 25px;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
  position:relative;
  z-index:0;
}
.white-grad > svg {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:-1;
}

body {
  background: yellow;
}

.hide {
 height:0;
 width:0;
}

<svg class="hide" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" id="border" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg>


<div class="white-grad"> 
<svg xmlns="http://www.w3.org/2000/svg">
  <use href="#border" />
</svg>
Some text here</div>

<div class="white-grad"> 
<svg xmlns="http://www.w3.org/2000/svg">
  <use href="#border" />
</svg>
text very loooooooooooong here</div>

Answer 2

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

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

• It's just a normal button with rounded edges and a gradient background
• It uses a box-shadow that is inset to fill the inside with white
• It has a 2px border which is actually transparent, so the very edge of the button shows through

body {
  background: aliceblue;
}

.gradient-border {  
  border-radius: 24px;
  padding: 6px 12px;
  background-image: linear-gradient(90deg, red 0%, blue 100%);
  /* Fill the inside with white */
  background-origin: border-box;
  box-shadow: inset 0 100vw white;
  /* A transparent border, so the very edge of the button shows through */
  border: 2px solid transparent;
}

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

Answer 3

border-radius has no effect on the border image. This is because border-image-outset is able to place the image outside the border box, so it doesn't make sense for the border image to be clipped by the border area. To create rounded borders when using a border image, you should:

1. [either] create the image itself with rounded corners,
2. or, […] draw it as the background instead.

-- https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#rounded_borders

The second suggested approach ("background") was thoroughly described in other answers, so let's have a look at the first one: create the [border] image itself with rounded corners.

border-image using SVG (since 2010-ish)

span {
  font-size: 26px;
  border-style: solid;
  border-color: crimson;
  border-width: 10px;
  border-image-slice: 10 fill;
  border-image-source: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
 width="100" height="100"> \
 <linearGradient id="g"> \
  <stop stop-color="darkviolet" /> \
  <stop stop-color="darkorange" offset="1" /> \
 </linearGradient> \
 <rect fill="lightgrey" stroke="url(%23g)" \
  stroke-width="3" x="1.5" y="1.5" \
  rx="8.5" width="97" height="97" /> \
</svg>');
}

html {
 padding: 1em;
 background: repeating-linear-gradient(-45deg, canvas 0 6px, color-mix(in srgb, canvas, canvastext 10%) 0 12px); background-size: 100vw 100vh
}

<span>Hello</span>

---

It has its drawbacks:

1. Hard to make it interactive: like any other url()-embedded graphics, we have to create any subsequent variant, and cannot transition between them smoothly.
2. Math and adjustments of inner spacing may be necessary: since SVG stroke is around path, to get 3px wide stroke with outer radius equal 10px, the SVG rx has to be 10 - (1/2 * 3) = 8.5, for example.
3. Scaling border-slice dimensions within border-width area may feel counterintuitive.
4. True solid background would be visible where SVG is transparent, making it difficult to get resilient CSS producing contrasting text with background in case of broken or unsupported CSS+SVG features.
5. Same applies to box-shadow: only usable to use filter: drop-shadow(...) instead.
6. Problematic semi-transparent background, since SVG still cannot draw stroke completely around fill.

But it has some benefits:

1. No clipping necessary,
2. no masking necessary,
3. overflow remains visible,
4. no fake opaque pseudo-background covers necessary,
5. easy to make border semi-opaque (transparent),
6. any shape SVG can do,
7. can be animated in any way imaginable.

Just for fun, what about making some "border-gradient" rotate and change the "middle" colour:

p {
  border-width: 2em;
  border-style: solid;
  border-image-slice: 40;
  border-image-source: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
 width="1000" height="1000"> \
 <linearGradient id="g" \
  gradientUnits="userSpaceOnUse"> \
  <stop stop-color="%23F0F7" /> \
  <stop offset=".5">\
   <animate attributeName="stop-color" \
    values="%230FF7;%23FF07;%230FF7" \
    dur="6s" repeatCount="indefinite" /> \
  </stop> \
  <stop stop-color="%230F07" offset="1" /> \
  <animate attributeName="x1" \
   dur="4s" repeatCount="indefinite" \
   values="0;1000;1000;0;0"/> \
  <animate attributeName="y1" \
   dur="4s" repeatCount="indefinite" \
   values="0;0;1000;1000;0"/> \
  <animate attributeName="x2" \
   dur="4s" repeatCount="indefinite" \
   values="1000;0;0;1000;1000"/> \
  <animate attributeName="y2" \
   dur="4s" repeatCount="indefinite" \
   values="1000;1000;0;0;1000"/> \
 </linearGradient> \
 <rect fill="none" stroke="url(%23g)" \
  stroke-width="20" x="10" y="10" \
  rx="30" width="980" height="980" /> \
</svg>');
 margin: 1em;
}

html {
  color-scheme: dark;
}

body {
  font-size: 10vmin;
  background-image: linear-gradient(
   to bottom right,
   canvas,
   color-mix(in srgb,
    canvas, canvastext 20%
   )
  );
  background-size: 1em 1em;
  background-repeat: round;
  text-align: center;
}

<p>Trippy semi-transparent rounded border filled with rotating gradient. (Hopefuly.)

Answer 4

You need to wrap the button in a div and set the border-radius on that parent div. In order to work, you will have to set overflow:hidden to that parent div as well. Like so:

.btn-wrap {
    border-radius: 5px;
    overflow: hidden;
    margin: 20px;
    width: 60px;
}
a.btn.white-grad {
    background: #eee;
    color: #313149 !important;
    border: 20px solid #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    border-image-slice: 20;
    line-height: 2;
}

	<div class="btn-wrap">
		<a href="#" class="btn white-grad">link</a>
	</div>