Skip to content

[css-borders-4][editorial] Rewrite syntaxes with property value range productions #12736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 5, 2025
Merged

[css-borders-4][editorial] Rewrite syntaxes with property value range productions #12736

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
571c641
[css-values-4] Syntax rewrite with property value range productions
cdoublev Sep 5, 2025
0000006
[css-borders-4] Reorganize corner sections
cdoublev Sep 5, 2025
f3d26f8
[css-borders-4] Clarify corner-shape expansion
cdoublev Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 56 additions & 45 deletions css-borders-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,17 +346,17 @@ The 'border-radius' shorthand</h4>
See [[CSS3BG]].

<h3 id=corner-shaping>
Corner Shaping: the 'corner-shape' property</h3>
Corner Shaping: the 'corner-*-shape' properties</h3>

By default, non-zero 'border-radius' values
define a quarter-ellipse <dfn export>corner shape</dfn>
that rounds the affected corners,
filling the <dfn export>corner area</dfn>
defined by the 'border-radius' for that corner.
However in some cases, other [=corner shapes=] are desired.
The 'corner-shape' property (and its longhands)
The 'corner-*-shape' properties (and their shorthands)
specify exactly what [=corner shapes=] a box will use
for the region defined by its 'border-radius' values.
for the region defined by its 'border-*-radius' values.

The different [=corner shapes=] can all be expressed
as different parameters to a <em>superellipse</em>.
Expand Down Expand Up @@ -459,20 +459,28 @@ Corner Shaping: the 'corner-shape' property</h3>
or use one of the supplied keywords which represent commonly used parameters.
See the <<corner-shape-value>> definition for details.

<h4 id=corner-shape-shorthand>
The 'corner-shape' Shorthand</h4>

<pre class="propdef shorthand">
Name: corner-shape
Value: <<corner-shape-value>>{1,4}
<pre class=propdef>
Name: corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape, corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape
Value: <<corner-shape-value>>
Initial: round
Applies to: all elements where 'border-radius' can apply
Inherited: no
Animation type: see individual properties
Logical property group: corner-shape
Computed value: the corresponding ''superellipse()'' value
Animation Type: see [=superellipse interpolation=]
</pre>

The 'corner-shape' property specifies the shape of the box's corners,
within the region specified by 'border-radius'.
The 'corner-*-*-shape' longhand properties
set the corner shape for the given corner.

The [=flow-relative=] longhands
('corner-start-start-shape', etc)
correspond to the [=physical=] longhands
('corner-top-left-shape', etc)
depending on the element’s 'writing-mode', 'direction', and 'text-orientation'.
The first <css>start</css>/<css>end</css> gives the block axis side,
and the second the inline-axis side
(i.e. patterned as <css>corner-<var ignore>block</var>-<var ignore>inline</var>-shape</css>).

<pre class=prod>
<dfn><<corner-shape-value>></dfn> = <l>''round''</l> | <l>''scoop''</l> | <l>''bevel''</l> | <l>''notch''</l> | <l>''<corner-shape-value>/square''</l> | <l>''squircle''</l> |
Expand Down Expand Up @@ -543,55 +551,35 @@ The 'corner-shape' Shorthand</h4>
the [=corner area=] is zero-sized as well,
and 'corner-shape' won't have any effect.

'corner-shape' does not alter the [=overflow=] rules for 'border-radius',
'corner-*-shape' does not alter the [=overflow=] rules for 'border-*-radius',
except insofar as it shapes the corners differently;
elements are still clipped by the shaped border as normal.

The curve specified by 'corner-shape'
The curve specified by 'corner-*-shape'
defines the <em>outer</em> edge of the border.
The inner edge of the border follows the curve of the outer edge
(in a way that's not necessarily expressible as a superellipse curve),
with a nearly consistent distance from the outer edge throughout,
(or a linearly increasing distance
if the 'border-width' of the two border edges meeting at the the corner are not uniform).

'corner-shape' also affects the rendering of 'box-shadow',
'corner-*-shape' also affects the rendering of 'box-shadow',
and how the [=overflow clip edge=] is shaped when it's extended from the box,
but these do not directly follow the 'corner-shape' path
but these do not directly follow the 'corner-*-shape' path
like the inner border edge does.
Instead, it scales the 'corner-shape' path in an axis-aligned manner.

<h3 id="corner-shaping-shorthands">
Corner Shaping Shorthands: the 'corner-shape' and 'corner-*-shape' shorthand properties</h3>

<h4 id=corner-shape-shorthands>
The 'corner-*-shape' Shorthands And Longhands</h4>

<pre class=propdef>
Name: corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape, corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape
Value: <<corner-shape-value>>
Initial: round
Applies to: all elements where 'border-radius' can apply
Inherited: no
Logical property group: corner-shape
Computed value: the corresponding ''superellipse()'' value
Animation Type: see [=superellipse interpolation=]
</pre>

The 'corner-*-*-shape' longhand properties
set the corner shape for the given corner.

The [=flow-relative=] longhands
('corner-start-start-shape', etc)
correspond to the [=physical=] longhands
('corner-top-left-shape', etc)
depending on the element’s 'writing-mode', 'direction', and 'text-orientation'.
The first <css>start</css>/<css>end</css> gives the block axis side,
and the second the inline-axis side
(i.e. patterned as <css>corner-<var ignore>block</var>-<var ignore>inline</var>-shape</css>).
<h4 id="corner-shaping-side-shorthands">
Shaping The Corners Of One Side:
The 'corner-*-shape' shorthands:</h4>

<pre class="propdef shorthand">
Name: corner-top-shape, corner-right-shape, corner-bottom-shape, corner-left-shape,
corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape, corner-inline-end-shape
Value: <<corner-shape-value>>{1,2}
Value: <<'corner-top-left-shape'>>{1,2}
</pre>

The 'corner-*-shape'/etc shorthands set the two 'corner-*-*-shape'
Expand All @@ -610,6 +598,29 @@ The 'corner-*-shape' Shorthands And Longhands</h4>
That is, ''corner-block-start-shape: round square''
sets ''corner-start-start-shape: round; corner-start-end-shape: square;''.

<h4 id="corner-shaping-shorthand">
Shaping All Corners At Once:
The 'corner-shape' shorthand</h4>

<pre class="propdef shorthand">
Name: corner-shape
Value: <<'corner-top-left-shape'>>{1,4}
Initial: round
Applies to: all elements where 'border-radius' can apply
Inherited: no
Animation type: see individual properties
</pre>

The 'corner-shape' property specifies the shape of the box's corners,
within the region specified by 'border-radius'.
The four values set the top, right, bottom and left shape, respectively.
A missing left is the same as right,
a missing bottom is the same as top,
and a missing right is also the same as top.

<h3 id="corner-shorthands">
Corner Sizing & Shaping Shorthands: the 'corner' and 'corner-*' shorthand properties</h3>

<h4 id="single-corner-shorthands">
Sizing & shaping a corner:
The 'corner-top-left', 'corner-top-right',
Expand All @@ -620,7 +631,7 @@ The 'corner-top-left', 'corner-top-right',
<pre class=propdef>
Name: corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right,
corner-start-start, corner-start-end, corner-end-start, corner-end-end
Value: <<length-percentage [0,&infin;]>>{1,2} || <<corner-shape-value>>
Value: <<'border-top-left-radius'>>{1,2} || <<'corner-top-left-shape'>>
Initial: 0
Applies to: all elements (but see prose)
Inherited: no
Expand All @@ -644,7 +655,7 @@ The 'corner-top', 'corner-right',
<pre class=propdef>
Name: corner-top, corner-right, corner-bottom, corner-left,
corner-block-start, corner-block-end, corner-inline-start, corner-inline-end
Value: [ <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{1,2} ]? ] || <<corner-shape-value>>{1,2}
Value: <<'border-top-radius'>> || <<'corner-top-shape'>>
Initial: 0
Applies to: all elements (but see prose)
Inherited: no
Expand All @@ -663,7 +674,7 @@ The 'corner' shorthand</h4>

<pre class="propdef">
Name: corner
Value: [ <<length-percentage [0,&infin;]>>{1,4} [ / <<length-percentage [0,&infin;]>>{1,4} ]? ] || <<corner-shape-value>>{1,4}
Value: <<'border-radius'>> || <<'corner-shape'>>
Initial: 0
Applies to: all elements (but see prose)
Inherited: no
Expand Down