RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G IconYouTube Icon
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Is it just me or are superellipsed pill shapes cool?

Check it out on Codepen and I know your next question is caniuse

some title

13 comments #

93likes
11reposts
  • T. Greg Doucette
  • GENKI
  • Yash Raj
  • That HTML Blog
  • Stefan Matei
  • Konstantin Dankov
  • Bramus
  • svenning????
  • Nilesh Prajapati
  • Felix
  • Jonathan Dallas

Join the conversation on

`superellipse(1.25)` pills are ill, what a fresh shape #CSS nerdy.dev/superellipse...
Adam ArgyleAdam Argyle
superellipses and squircles both trigger me like crazy I can't even say what it is exactly - both of those shapes just annoy me and make me think "what? why??" they're just "wrong" somehow I wouldn't use that shape for anything ????‍♂️ I know it's probably just me but ????????
Rasmus SchultzRasmus Schultz
we'll see, it could just be me that likes them…!
Adam ArgyleAdam Argyle
Squircle is more fun to say though
Andreas MøllerAndreas Møller
???? Superlipse ???? Squircle
Christoph PäperChristoph Päper
☝️ ???? Superlips ????️ Squirrel
Christoph PäperChristoph Päper
"ill"?! ????????????
EIOEIO
Superellipse gives buttons a unique edge over rounds.
Rodrigo DiasRodrigo Dias
Some time ago I made a pen looking at CSS-only concentric border radii. A couple of days ago I added corner-shape: squircle but I didn't really like the result. Then I saw this post by @nerdy.dev and tried his value of 1.25 and I think it came out pretty good. Thanks Adam! codepen.io/botteu/pen/X...
You’re a superellipse!
Oliver TurnerOliver Turner
Better than squircle for modern UIs.
Rodrigo DiasRodrigo Dias
I don’t understand the superellipse()! I can’t really tell how it’s all that different from low border radius? Like maybe I can tell it’s slightly different, but I’m not sure how.
Scarlie ✨Scarlie ✨