Smooth rounded corners or continuous corners (used throughout iOS) can be easily achieved in Figma and other design software. I’m fairly sure there’s no way to do this simply on the web and it drives me mad. Do y’all know of any ways to do this that can actually be used in production?
The best I can find is to use clip-paths to mask out the shape.
This always works for me:
border-radius: 25px;
Just change the value to whatever you need.
These are just standard rounded corners, I’m talking about the type of smooth rounded corners used in iOS
Sounds like you wanna get more specific about your curves, you’ll need to look into bezier curves for corners. Looks like it should be possible via masking: https://stackoverflow.com/questions/28583988/css-borders-with-bezier-curves#28613988
Thanks! Didn’t think of bezier curves in relation to this, that’s a good search term.
Highly doubt it, but you know if it’s possible to do this with a border and box-shadow on the element?
Not sure, but worst case scenario you could have a second div z-indexed behind the custom shaped one that you do a standard border radius and blur on and it would look pretty close to being a shadow that fits. Obviously that’s messier, but it’s a possibility.
Oh nice, yeah that could still be pretty convincing. I might even be able to get away with an ::after instead. I’ll mess around with it, thanks!
I’m pretty sure you can just increase the value to get that, but maybe not.
Nope, It’s kinda confusing because it looks very similar. Smooth corners are actually a different mathematical calculation than the standard ones from the border-radius property, that’s why I’m kinda doubtful there’s an easy way to do it
Ok, I can see that now. I had to stare at it a while like an autostereogram to see it. It’s late here.
Yeah I don’t blame you, I even uploaded the wrong example photo at first lol
Oh good, my eyes aren’t that bad yet. Thanks for letting me know!
border-radius?
That’s just standard rounded corners, I’m talking about squircles or smooth rounded corners which have a slightly different appearance.
