Blur does not stick to applied radius of div?

General
1

Description:

So basically I’m trying to create a field that applies a blur to whatever it falls over, but the blurred field sticks to square corners, ignoring the radius of 10 or 20px I applied to the div.

Is this normal behaviour?

Step-by-step reproduction instructions:
Create div in the header, put a menu in it, apply blur to the div’s background so that once it scrolls it’ll blur the below surfaces and keep the menu readable. now apply the radius to the div; and see it is not applied in the blur

2

Make sure to apply position:relative and overflow:hidden to your element.
Let me know if it helps.

1 Like
3

it worked! thanks a lot