TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Apple-like smooth corners for Tailwind CSS

33 pointsby instagary4 months ago

6 comments

Uehreka4 months ago
I already knew about the whole “mathematically perfect corners” thing Apple does, so I was super curious how someone implemented that in CSS. I figured it was some sort of new CSS feature involving splines, but then I saw there was a folder called “masks” containing PNG files at 3 resolutions and I was immediately transported back to the mid-2000s.
评论 #42825334 未加载
评论 #42825734 未加载
burgerrito4 months ago
Not an Apple product user so TIL Apple's rounded corner are different than usual rounded corner using CSS. I'm going to guess this is using CSS's clip-path!
silverwind4 months ago
Why don't browsers default to this?
_aleph2c_4 months ago
Is this a joke, I can't see a difference.
评论 #42825470 未加载
评论 #42825040 未加载
评论 #42825073 未加载
评论 #42825059 未加载
weswilson4 months ago
Obligatory video on splines: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=jvPPXbo87ds" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=jvPPXbo87ds</a><p>From what I&#x27;ve read, Apple rounded corners are using G^2 or G^3 geometric continuity to generate smoother curves.<p>It&#x27;s hard to tell which smoothing function this library uses since it looks like it&#x27;s based on PNG masking.
phoronixrly4 months ago
Cool hack, can I see it in action anywhere, OP?
评论 #42825430 未加载