DEV Community

Border with gradient and radius

Temani Afif on February 12, 2021

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

Read full post

Veri • May 30

Thanks

David Hyland • Aug 16

This helped enormously, thank you!

eshimischi • Feb 19 '22

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

Temani Afif • Feb 19 '22

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

Mads Stoumann • Mar 2 '22

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

eshimischi • Feb 19 '22 • 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

eshimischi • Feb 19 '22 • 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

nat_souljah • Sep 28 '22

Thus just saved me more digging, thanks muchacho

Nate Dolesh • Aug 9 '21

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

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

Temani Afif • Aug 9 '21

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

Nate Dolesh • Aug 22 '21

Thank you! That does fix it!

Stefano Magni • Sep 21 '23

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

Warren D • Mar 9 '21

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

Jardel Bordignon • Jun 24 '21

Nice! thanks.

Alvaro Montoro • Feb 12 '21 • Edited

Nice article, and nice seeing you here :)

Temani Afif • Feb 12 '21

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

Dev Two • May 3 '21

Where can we find pre-made gradients?

Temani Afif • May 3 '21

what kind of pre-made gradients?

Dev Two • May 4 '21

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

After some digging around the internet, I found this

eggradients.com/

Ruanna • Feb 12 '21

So pretty!

Anguram Shanmugam • Feb 12 '21

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

Temani Afif • Feb 12 '21

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

Michael Hungbo • Feb 12 '21

You might just love css-tricks.com 😉

Facundo Corradini • Feb 22 '21

Great article, so good to see you here!

Temani Afif • Feb 22 '21

thanks :)

Dimitris Chitas • Feb 14 '21

Nice

Nancy Gio • Feb 13 '21

Awesome!!

Faisal L • Aug 28 '21

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

Lamtoro • Feb 13 '21

creating shadow gradient use this thing

Temani Afif • Feb 13 '21

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

SamirKaushikBWI • Apr 13 '23

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.

Thanh Tuan Dinh • Feb 29

Thanks so much bro <3