Kevin Powell - Community•2mo ago

"Add an overlay to a background-image with one line of CSS" - Border radius does not works

I am trying to follow the new tutorial about colour overlay with border-image. It works very well, but I lost the ability to controll border radius. Any suggestions?
overflow set up for hidden, but nothing changes. Thank you!

6 Replies

MarkBoots•2mo ago

unfortunately a border-image does not respect border-radius. so yea, for this you'd still need multiple bg-image. the image itself and a gradient for example

background-image:
  linear-gradient(hsl(0 0% 0% / .5) 0 0), /* overlay */
  url(your-image.jpg); /* background-image */

background-image:
  linear-gradient(hsl(0 0% 0% / .5) 0 0), /* overlay */
  url(your-image.jpg); /* background-image */

ditta•2mo ago

thank you! so I can stop think about it.

b1mind•2mo ago

It has to be used with a linear-gradient too Mark?

MarkBoots•2mo ago

or radial, conic. a single color would only work as background-color (which goes underneath, not on top)

capt_uhu•2mo ago

just to be clear doesn't have to be a gradient. Could be a vector or raster image too.

ditta•2mo ago

👍 i figured out 🙂 instead of styling the class itself, I style the very first children: .decor--overlay > * { width: 100%; height: 100%; border-radius: inherit; overflow: hidden;
border-image: var(--decor--overlay__image, linear-gradient( hsl( var(--clr1) / .5), hsl(var(--clr2) / .5))) fill 1; } with a variable, still able to customize the gradient (opacity, colour etc...)

Gaming

Programming

"Add an overlay to a background-image with one line of CSS" - Border radius does not works