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?
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.
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.