DEV Community

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

Posted on • Updated on

Border with gradient and radius

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

Related posts for more examples:

StackOverflow - Border Gradient with Border Radius

StackOverflow - Button with transparent background and rotating gradient border

Discussion (27)

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 Author

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
wozwebs profile image
Warren D

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

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 Author

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 on

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
eshimischi profile image
eshimischi • Edited on

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
jardelbordignon profile image
Jardel Bordignon

Nice! thanks.

Collapse
alvaromontoro profile image
Alvaro Montoro • Edited on

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
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
feco2019 profile image
Dimitris Chitas

Nice

Collapse
tudigitalmrkter profile image
Nancy Gio

Awesome!!

Collapse
ruannawrites profile image
Ruanna

So pretty!

Collapse
heyprotagonist profile image
Protagonist

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

Collapse
heymich profile image
Michael Hungbo

You might just love css-tricks.com 😉

Collapse
afif profile image
Temani Afif Author

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

Collapse
salluthdev profile image
Faisal L

Jenius! Thanks bro, your explanation has solved my problem.

Collapse
facundocorradini profile image
Facundo Corradini

Great article, so good to see you here!

Collapse
afif profile image
Temani Afif Author

thanks :)

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