DEV Community

Cover image for Border with gradient and radius
Temani Afif
Temani Afif

Posted on • Updated on

Border with gradient and radius

Find out more CSS tricks at css-tip.com

We all know the property border-image that allows us to add any kind of images (including gradients) as borders.

.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}
Enter fullscreen mode Exit fullscreen mode

Gradient border

Unfortunately, border-radius isn't supported with border-image and it's painful to find tricks to obtain rounded borders having a gradient.

Here is a trick that will produce such a result. No complex code, No SVG, or multiple elements are required! only two lines of CSS code using the mask property.

.box {
  border-radius: 50px; /*1*/
  border: 10px solid transparent; /*2*/
  background: linear-gradient(45deg,red,blue) border-box; /*3*/
  -webkit-mask: /*4*/
     linear-gradient(#fff 0 0) padding-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /*5'*/
          mask-composite: exclude; /*5*/
}
Enter fullscreen mode Exit fullscreen mode

Gradient border with radius

Explanation

(1)(2): Those lines are trivial.
(3): We apply a gradient as background and we make its origin the border box (by default it's the padding box).
(4): Using the mask property, we apply two opaque layers. The bottom one will cover the whole element and the top one will cover only the padding box (so it will not cover the border area)
(5): We exclude the top layer from the bottom one so that only the border area will be shown!
(5'): Some browsers still don't support mask-composite so we use the prefixed version.

That's it!

Now you can adjust the border, gradient, and radius as you want. The only drawback is that this will mask the content so we can move the code to a pseudo-element instead

.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 10px; 
  background:linear-gradient(45deg,red,blue); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}
Enter fullscreen mode Exit fullscreen mode

Gradient border radius

I replaced the border with padding to make the code shorter but the logic remains the same: we exclude the content area from the padding area so only padding will remain visible

Find more CSS Tips

StackOverflow - Border Gradient with Border Radius

StackOverflow - Button with transparent background and rotating gradient border

Top comments (33)

Collapse
 
email_signupsign_up profile image
Veri

Thanks

Collapse
 
davidhyland profile image
David Hyland

This helped enormously, thank you!

Collapse
 
natedolesh profile image
Nate Dolesh

Thanks, it could work in some situations, although two issues:

  1. I had to add z-index: -1; to the ::before pseudo element to make the content clickable/selectable
  2. After doing the above, the border won't be visible if any parent element has a background
Collapse
 
afif profile image
Temani Afif

if you are adding z-index:-1 to the pseudo element you need to add z-index:0 to the main element to avoid the issue OR don't use z-index at all and add pointer-events:none to the pseudo element

Collapse
 
natedolesh profile image
Nate Dolesh

Thank you! That does fix it!

Collapse
 
noriste profile image
Stefano Magni

Thank you so much! Even if I ended up not using your solution, you helped me find out the best way to do this dev.to/noriste/production-grade-gr... 😊

Collapse
 
eshimischi profile image
eshimischi

But what if i need to make a background colour as well? for instance, gradient as well

Collapse
 
afif profile image
Temani Afif

in this case, you don't need mask or pseudo element simply do

.box {
  border:8px solid #0000;
  border-radius:10px;
  background:
    linear-gradient(red,blue) padding-box,
    linear-gradient(green,pink) border-box;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
madsstoumann profile image
Mads Stoumann

This is SO much cleaner than all the "gradient border"-articles you find around the web — love the 4-char alpha-hex. Thank You!

Collapse
 
eshimischi profile image
eshimischi • Edited

Well i tried what you said, but it looks very much differently from what i want to archive and it's so sad.

PS: i decided simply to export the background with border as a background (svg), the simplest way

Collapse
 
eshimischi profile image
eshimischi • Edited

thanks for the tip, will try.. my designer made this, at first i tried it with a border-image-source but it doesn't work with border-radius, of course

Template

Collapse
 
sodjanathan profile image
nat_souljah

Thus just saved me more digging, thanks muchacho

Collapse
 
wozwebs profile image
Warren D

Thanks for this but doesn't work in Safari, only Chrome and Firefox

Collapse
 
jardelbordignon profile image
Jardel Bordignon

Nice! thanks.

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Nice article, and nice seeing you here :)

Collapse
 
afif profile image
Temani Afif

thanks :) will try to bring some tricks and some hacks to dev.to ;)

Collapse
 
heyprotagonist profile image
Anguram Shanmugam

is there website (like (JavaScript.info) ) for CSS ❓❓❓

Collapse
 
afif profile image
Temani Afif

Maybe the MDN website: developer.mozilla.org/en-US/docs/W...

Collapse
 
heymich profile image
Michael Hungbo

You might just love css-tricks.com 😉

Collapse
 
ruannawrites profile image
Ruanna

So pretty!

Collapse
 
dewtwo profile image
Dev Two

Where can we find pre-made gradients?

Collapse
 
afif profile image
Temani Afif

what kind of pre-made gradients?

Collapse
 
dewtwo profile image
Dev Two

I mean gradient which made by someone to use. Ready to use gradients.

After some digging around the internet, I found this

eggradients.com/

Collapse
 
facundocorradini profile image
Facundo Corradini

Great article, so good to see you here!

Collapse
 
afif profile image
Temani Afif

thanks :)

Collapse
 
feco2019 profile image
Dimitris Chitas

Nice

Collapse
 
tudigitalmrkter profile image
Nancy Gio

Awesome!!

Collapse
 
samirkaushikbwi profile image
SamirKaushikBWI

I need to make a div with glassy background and rounded borders with gradient. Is there some way I could do that without using any background-padding technique.