Discussion on: Border with gradient and radius

[eshimischi]

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

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

[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!

[eshimischi]

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

[eshimischi]

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

[nat_souljah]

Thus just saved me more digging, thanks muchacho