keyword equivalent for `border-radius: 9999px;`
The CSS working group has been looking for a keyword for this shape created by
border-radius: 9999px for a while. Anyone have any ideas?
44 Replies
pill
that's a pill-shaped shape
According to one of Kevin's videos, he used
100vw, I think.you can use anything larger than it will ever be
for example,
9in would be a good size tooFor border radius I always use percentage, either %50 or %100 will do the trick here I think.
no, that doesn't do the same
that makes a circle
Not if it's not a square right?
It's a rectangle
It will only make a (perfect) circle if it's 1x1 ratio.
Bit %25 will prolly more likely for this shape tbf.
it always makes a round shape, not a pill
If the shape is a long rectangle it wont be able to do so.
With vectors there is a limit you can round your corners if all corners are max rounded.
Afaik
This is the case in adobe illustrator afaik but I think it transfers to web SVGs.
It will try to make a circle but since it cant if the shape is already a long rectangle I think it will create the pill shape.
Ah nvm, I tested it in codepen my apologies.
I actually never encoured the
in beforeEdit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
here, experiment with this
in is inches
25% makes a rounded rectangle
or square
i made this specifically for you, so, i expect you to try it 🤣
yes, i pinged youI don't mind the ping, I actually prefer it.
Especially when in conversation.
i know, but i pinged you so im sure you experiment
Ah, gotcha.
9 inches is really big, which is why i use it
and much shorter than 9999px
I think I just confused with how vectors in Adobe Illustrator or Figma.
But even they use pixels I think.
pixels, inches and absolute units make a pill
Pill seems most sensible to me too. It's a very simple word and everyone is familiar with it. Pill is a common way to describe that shape. An alternative would be capsule but i find that relates more to 3d shapes than 2d
it's super easy to remember too
Pill is just the name of the shape, afaik the word "pill" is not used in HTML as like attribute or css property.
yeah, but this is a discussion to suggest a name for it
Ah, ig I got confused with our discussion about the unit and thought they where asking for a different way of writting the 9999px
not at all
it was my opinion on the 9999px
It's 1am I am tired, gonna go now.
right, you're 1 hour ahead
so
pill definitely is the word I see used the most to describe this shape but prescription/over-the-counter pills can be a lot of different shapes. Many are just round. I want to say the shape we are talking about here is technically a capsule or a caplet?
The other problem is that this is going to get reused for non-round shapes with corner-shape. Writing border-radius: pill; with corner-shape: bevel; would make a diamond shape which fells weird.Can you explain what exactly you're trying to do?
Is the idea define predefined values for
corner-radius (which doesn't exist) to go with corner-shape to differentiate it from border-radius (which corner-shape currently uses) ?aka a css variable name xd
Not really a variable, I would define this as a keyword value.
I did not knew that corner-shape was a thing I just checked it on MDN seems cool. is it like very new?
Yes, it is still experimental.
It either accepts keyword values such as "notch", "scoop", "bevel", "round ", "square" or "squirqle" or superelipsse numeric values.
Some time ago I created a corner-shape radius generator. For now it only uses superelippses but I need to find time to add keywrod values too.
CSS corner-shape superellipse() generator
A CSS corner-shape generator for the superellipse() function. Create your own corner shape with the superellipse() function and copy the code to your project.
I asked the working group about creating a new
corner-size property to go along with corner-shape. They said they really have to just reuse border-radius for legacy reasons.
Here's all the corner-shape "pill" equivalences: https://codepen.io/jsnkuhn/pen/MYwMWLq
the "round" is just a pill 🤔
yep that's just the default normal border-radius that we have had. Under the name
corner-shape: round;round for a circle and a pill shape is just unhinged
but there's no rounded square
?? so to be clear the first row is the
9999px value and the second row is 50%. There's are the extremes.i know
“Pill” seems most intuitive and recognizable to me. If looking for another suggestion “capsule” could work.
capsule would be a good one as well
i know others suggested it
tailwind 4.1 uses the keyword "full" and the new
infinity keyword for the value. All older versions of tailwind use 9999px:
https://tailwindcss.com/docs/border-radius#creating-pill-buttons
Bootstrap 5 uses rounded-pill and 50rem for the value: https://getbootstrap.com/docs/5.0/utilities/borders/#border-radius
material ui has --border-radius-full: 999px; and refers to them as "chips": https://mui.com/material-ui/react-chip/#basic-chipmaterial ui is using it for a specific purpose, and not the name of the shape itself
bootstrap is refering to the shape
same as tailwind
but it's interesting how the names are different
I think either pill or capsule fits best as keyword.
as i said before pill and capsule are perfectly fine for the round variant of this but fall apart with different
corner-shape valuesI have had pills that look like ellipses too so if that's a concern, capsule is a pretty unambiguous term too but i think pill is good
