DEV Community

loading...
Cover image for Border with gradient and radius

Border with gradient and radius

afif profile image Temani Afif ・2 min read

We all know the property border-image that allow 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 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: destination-out; /*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 mask we apply two opaque layers. The bottom one will cover all the 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 and only the border area will be shown!
(5'): Some browsers still doesn't support mask-composite so we use the prefixed version and destination-out is an equivalent of exclude

That's it!

Now you can adjust the border, gradient and radius like 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;
  top:0;
  left:0;
  right:0;
  bottom: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: destination-out; 
  mask-composite: exclude; 
}
Enter fullscreen mode Exit fullscreen mode

Gradient border radius

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

Related posts for more examples:

StackOverflow - Border Gradient with Border Radius

StackOverflow - Button with transparent background and rotating gradient border

Discussion (17)

pic
Editor guide
Collapse
alvaromontoro profile image
Alvaro Montoro • Edited

Nice article, and nice seeing you here :)

Collapse
afif profile image
Temani Afif Author

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

Collapse
yujiri8 profile image
Ryan Westlund

Sounds fun! This article was kinda over my head but cool, we definitely appreciate the content.

Collapse
feco2019 profile image
Collapse
dewtwo profile image
Dev Two

Where can we find pre-made gradients?

Collapse
afif profile image
Temani Afif Author

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
tudigitalmrkter profile image
Nancy Gio

Awesome!!

Collapse
facundocorradini profile image
Facundo Corradini

Great article, so good to see you here!

Collapse
afif profile image
Collapse
ruannawrites profile image
Ruanna

So pretty!

Collapse
retr0c0de profile image
Anguram Shanmugam

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

Collapse
localstorage profile image
Michael Hungbo

You might just love css-tricks.com 😉

Collapse
afif profile image
Collapse
wozwebs profile image
Warren D

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

Collapse
cacingsuper profile image
Lamtoro

creating shadow gradient use this thing

Collapse
afif profile image
Temani Afif Author

Yes, quite easy by adding a blur filter to the pseudo element ;)