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:
And just one pixel less for the height:
Same with all other units.
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.
It’s very interesting anyay, I never realized edges would render so blurry. It starts to be really noticeable around 600px