Blurry edges of CSS shape

Hi,

I tried to make some sort of rounded background for the hero section in one of my webdesign projects.
Theoretically I get the result that I want, but the div elements edges are not sharp but blurry (see screenshot).
One reason fort that: size.
Only if I exceed 100% widht or height, the edges get blurry, like when you increase the size of a jpg image above 100%.
But that should not happen with CSS shape, or?

Hope someone can help me!
Thanks!

Regards,
Dusan


Hi Dusan can you share your read-only link please?

Hi Vincent!

https://preview.webflow.com/preview/newsmile?utm_source=newsmile&preview=3733381b9b308600b475b45045f0b985

Have you tried using a svg shape? That might give you a crisp image as well.

1 Like

It has to do with using percentages for your sizing.

Use vw for your sizing and you’ll get crisp edges. I was able to get that same curve with crisp edges with 300vw for both height and width and a 50% corner radius.

Wow! I never thought about changing units.
Thank you so much!

1 Like

It doesnt seem to be about the units. It seems to be that if it’s not square and very large, edges are rendered blurry. Example with 5000px ×5000px:

http://vincent.polenordstudio.fr/snap/Webflow_-_Newsmile_2018-12-12_17-42-33.png

And just one pixel less for the height:

http://vincent.polenordstudio.fr/snap/Webflow_-_Newsmile_2018-12-12_17-44-32.png

Same with all other units.

http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2018-12-12_17-44-58.png

So you’re right when you say you were expecting the edge to be sharp. I was too. I tried the techniques with box-shadow and transparent border that we use for sharper edges at small scale, but with no result.

You have blurry edges because your element is set to fit its parent, and its parent is basically 100vw 100vh = it’s never perfectly square (or so rarely). By setting dimensions other than % on your edged element, you can make it square and have sharp edges.

Ultimateli @rileyj_s is right: craft yourself a SVG shape, you’ll have better control and consistency, and don’t have to deal with oversized objects.

Edit : found a solution that works with your settings. You need to define a radius in px. It can affect the shape though.

http://vincent.polenordstudio.fr/snap/Webflow_-_Newsmile_2018-12-12_17-52-35.png

It’s very interesting anyay, I never realized edges would render so blurry. It starts to be really noticeable around 600px

1 Like