Background overlay does not inherit border radius

[smontreuil]

When I create a div with an image backgound and add a gradient overlay the overlay is not inheriting the border radius I applied to the div.

Is this expected behaviour? If it is, how might I get the overlay to respect the border radius?

[Marius]

Either:

Or:

[smontreuil]

Thanks @Marius !

Post must be at least twenty characterssssssssssss

[Lijn-B]

@Marius thanks.
But I noticed if you have a filter on the background, for example a blur, that this doesn’t do the trick:

The div is relative, overflow is hidden.
How to solve this?

[StrangeTech]

Hi @Lijn-B,

@Lijn-B

But I noticed if you have a filter on the background, for example a blur, that this doesn’t do the trick:

Using the second option shared by @Marius should work:

@Marius

Or:

[Lijn-B]

@StrangeTech Thanks Dan,

I noticed that I had to have a border line. I removed that and than it doesn’t work. So I added a transparent border line and that does the trick.

Thanks again, also you @Marius