this post was submitted on 22 Nov 2023
6 points (80.0% liked)

CSS

462 readers
1 users here now

founded 1 year ago
MODERATORS
 

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?

you are viewing a single comment's thread
view the rest of the comments
[–] silas@programming.dev 1 points 10 months ago (1 children)

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?

[–] phorq@lemmy.ml 1 points 10 months ago (1 children)

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.

[–] silas@programming.dev 1 points 10 months ago

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!