61

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?

Improve this question
0

4 Answers 4

Reset to default
167

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 border gradient with radius

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>

CSS border radius with linear gradient

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>

CSS gradient mask with border radius

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>

CSS circular border with gradient

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>

CSS curved shape with gradient border

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>

Linear gradient curved shape

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>

CSS border gradient with SVG mask

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

How to get a transparent background with your solution ? Thanks !
I love you. @NoéVIRICEL if you change the #ccc value in the first linear-gradient to transparent, that should work
@mikespitz_8 the first one won't work with transparency, you need to consider the other solutions for transparency (the SVG or the mask)
This is really cool, but it seems that if the box background and page background are different colors, the page background square corner will stick out from behind the border.
@MrJWolf the color inside mask doesn't matter, it needs to be a solid color without transparency (you can use #000, red, blue, #f00, etc). The color your see comes from the background definition
|
11

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>

Improve this answer

4 Comments

The problem with this is that, unlike with the masking method, you cannot have a (semi)transparent background. You could use blending IF every pixel of the page background is either darker or lighter than every pixel of the text and border... which may happen, but is rarely the case. The fill with box-shadow method also isn't the right choice if the button needs to have a gradient background.
Thanks @Ana. Yes I agree those are all reasonable criticisms. In our case I didn't need transparent background or gradient fills, so these limits were acceptable.
By far the best implementation so far. Note the button inner colour can be changed by modifying the shadow colour, here is red one: box-shadow: inset 0 100vw red;
Thanks @CodePal! Yep, I hoped to indicate that with the Fill the inside with white comment but maybe it wasn't so obvious.
1

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.)

Improve this answer

Comments

-1

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.