[css-borders] border-radius with a circular edge

[jonathantneal]

Is there, or could there be a more semantic way to describe a border radius as being round rather than some current conventions?

From TailwindCSS:

.rounded-full {
  border-radius: 9999px;
}

From an accepted StackOverflow answer:

#rect {
  border-radius: 100000000000000px;
}

Other examples include 9999em or 100vmax.

Perhaps we could introduce a keyword, like round?

.rounded-full {
  border-radius: round;
}

#rect {
  border-radius: round;
}

[nickfla1-mxm]

Just a minor note:

From an accepted StackOverflow answer:

Points to the wrong url (same as Tailwind's).

[argyleink]

YES

[Loirooriol]

Maybe calc(1px / 0) or calc(infinity * 1px) look less arbitrary than 100000000000000px?

[argyleink]

could use border-radius: 1e5px too

[jonathantneal]

Thank you, @nickfla1-mxm! The link has now been updated.

[anthonyrivas]

As much as I would love to see this, is there any concern that the term round or something similar could be confusing? Perhaps something more like "circular" would be more descriptive?

Generally any radius is making a corner round to some degree, but "circular" may better indicate that it is meant to be fully rounded?

[yisibl]

This has indeed troubled developers for many years, and using 999px or 9999px is too hack.

[jonathantneal]

While I don’t want the request for a semantic value to get confused with bikeshedding a specific keyword solution, I hope it will be helpful to share something I’ve learned. Having reviewed the specification for corner-shape in css-backgrounds-4, I now think border-radius would need a keyword that somehow describes the radii without describing its shape.

Here is an example of using border-radius and corner-shape from the current specification:

a {
  border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
  corner-shape: round angle angle round;
  padding: .5em 1em .5em .5em;
}

I think it would be confusing to write border-radius: round; corner-shape: angle. Therefore, a better term might be something like fill, quarter, etc.

[yisibl]

While Chrome and Safari already implement the infinity keyword, a separate border-radius: round might help optimize browser performance. And it's easier for developers to understand.

calc(1px / 0) or calc(infinity * 1px) still looks like a hack.

[simevidas]

Since a circular border is a the result of a radius that is as large as possible, maybe the optimal keyword for this would be one that describes exactly that.

{
  border-radius: maximum;
}

[SelenIT]

Adding separate keyword for the corner shape (like circle vs. ellipse for radial gradient shapes) will have additional use cases though. e.g. something like border-radius: 25% round could create a shape with roundings taking up quarters of the shorter side length. Maybe this is not the most frequent case, but there seems to be no other reliable solution if this is needed.

[noamr]

I think this can be solved by #5881 (or #6997 which is kind of a duplicate)

Rather than forcing border-radius to be a circle, give clip-path: circle with some semantic to make it affect borders and play nice with filters.

[simevidas]

CSS Values spec:

[infinity] can be used to indicate a "largest possible value", since an infinite value gets clamped to the allowed range.

https://drafts.csswg.org/css-values-4/#calc-error-constants

I think this means that border-radius: infinity should result in a maximum circular border, so there’s no need for a new keyword (unless infinity isn’t readable enough).

If this is true, the next step would be to find/create the browser bugs and get this implemented.

CC @Afif13

[Loirooriol]

@simevidas You can't use infinity like that unless the property allows it (like animation-iteration-count). You need calc(infinity * 1px), calc(1px / 0), etc. Needs to be inside a math function, and have length unit.

[Afif13]

@Loirooriol it seems that "infinity" is only allowed within a calculation. z-index: infinity didn't work for me but z-index:calc(infinity) works fine. z-index: max(infinity) seems valid as well. Same with animation-iteration-count

[Loirooriol]

Yeah, bad example, animation-iteration-count accepts infinite, not infinity. Filed #7204

[jsnkuhn]

all this talk of infinity, I think, is leaning into the hack.

This pill shape is created on a horizontal element (lets say width: 200px; and height: 50px;) when the border-radius of the corners are the pixel equivalent of 50% of the elements height (the value in our example would be 25px).

https://codepen.io/jsnkuhn/pen/ZErOqwL

This creates a situation where the reference circles for the top and bottom corners are fully overlapping. (Note that this is also how we get a circle with border-radius: 50%; on a square element because all the reference circles for the corners overlap.)

It needs to be a equal value so that the radius reference is round. If you would do border-radius: 50%; in our horizontal example you get 50% of the element width and 50% of the element height which gives you a reference ellipse because the width and height of our element are different. In our example we can do border-radius: 12.5% / 50%; to get equal px values for the reference circle.

The problem comes in when the width and the height values are not fixed.

So 9999px works because:

1. it's a pixel value. So it will create a circle.
2. Border-radius must be clamped somehow to deal with unrealistically high numbers

So is what's needed here some sort of element unit? As in border-radius: 50eh; eh = element height

Also of note: This has implications for corner-shape if that ever happens. There's similar situation with angle/bevel and scoop corners

[jsnkuhn]

for the record these are the 999999px equivalent shapes that would be created from the proposed corner-shapes values. And no the notch example is not a mistake, it will just cut the sides off the element:

so hopefully crystal clear why a round or pill keyword just isn't going to work.

a live codepen of these with my corner-shape worklet (chrome only for now). FYI haven't clamped the corner-size values yet so 9999999px isn't going to work as expected.

https://codepen.io/jsnkuhn/pen/xxWGOzJ?editors=0010