From 571c641ad77d84258a3f5ea7dde5c3aaa8bd596f Mon Sep 17 00:00:00 2001 From: Guillaume Date: Fri, 5 Sep 2025 10:58:22 +0200 Subject: [PATCH 1/3] [css-values-4] Syntax rewrite with property value range productions --- css-borders-4/Overview.bs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index 3e7778c5ca2..ba3241f23ed 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -464,7 +464,7 @@ The 'corner-shape' Shorthand 
 		Name: corner-shape
-		Value: <>{1,4}
+		Value: <<'corner-top-left-shape'>>{1,4}
 		Initial: round
 		Applies to: all elements where 'border-radius' can apply
 		Inherited: no
@@ -591,7 +591,7 @@ The 'corner-*-shape' Shorthands And Longhands
 	
 	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: <>{1,2}
+	Value: <<'corner-top-left-shape'>>{1,2}
 	

 
 	The 'corner-*-shape'/etc shorthands set the two 'corner-*-*-shape'
@@ -620,7 +620,7 @@ The 'corner-top-left', 'corner-top-right',
 	
 		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: <>{1,2} || <>
+		Value: <<'border-top-left-radius'>>{1,2} || <<'corner-top-left-shape'>>
 		Initial: 0
 		Applies to: all elements (but see prose)
 		Inherited: no
@@ -644,7 +644,7 @@ The 'corner-top', 'corner-right',
 	
 		Name: corner-top, corner-right, corner-bottom, corner-left,
 			corner-block-start, corner-block-end, corner-inline-start, corner-inline-end
-		Value: [ <>{1,2} [ / <>{1,2} ]? ] || <>{1,2}
+		Value: <<'border-top-radius'>> || <<'corner-top-shape'>>
 		Initial: 0
 		Applies to: all elements (but see prose)
 		Inherited: no
@@ -663,7 +663,7 @@ The 'corner' shorthand
 
 	
 		Name: corner
-		Value: [ <>{1,4} [ / <>{1,4} ]? ] || <>{1,4}
+		Value: <<'border-radius'>> || <<'corner-shape'>>
 		Initial: 0
 		Applies to: all elements (but see prose)
 		Inherited: no

From 0000006a5fb4675b284407384832aeef6daaeaa1 Mon Sep 17 00:00:00 2001
From: Guillaume 
Date: Fri, 5 Sep 2025 11:10:35 +0200
Subject: [PATCH 2/3] [css-borders-4] Reorganize corner sections

---
 css-borders-4/Overview.bs | 89 +++++++++++++++++++++------------------
 1 file changed, 48 insertions(+), 41 deletions(-)

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index ba3241f23ed..88b0cc14772 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -346,7 +346,7 @@ The 'border-radius' shorthand
 	See [[CSS3BG]].
 
 

-Corner Shaping: the 'corner-shape' property

+Corner Shaping: the 'corner-*-shape' properties
 
 	By default, non-zero 'border-radius' values
 	define a quarter-ellipse corner shape
@@ -354,9 +354,9 @@ Corner Shaping: the 'corner-shape' property
 	filling the corner area
 	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 superellipse.
@@ -459,20 +459,28 @@ Corner Shaping: the 'corner-shape' property
 	or use one of the supplied keywords which represent commonly used parameters.
 	See the <> definition for details.
 
-

-The 'corner-shape' Shorthand

-
-	
-		Name: corner-shape
-		Value: <<'corner-top-left-shape'>>{1,4}
+	
+		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: <>
 		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=]
 	

 
-	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 start/end gives the block axis side,
+	and the second the inline-axis side
+	(i.e. patterned as corner-block-inline-shape).
 
 	
 		<> = ''round'' | ''scoop'' | ''bevel'' | ''notch'' | ''/square'' | ''squircle'' |
@@ -543,11 +551,11 @@ The 'corner-shape' Shorthand
 	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 outer 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),
@@ -555,38 +563,18 @@ The 'corner-shape' Shorthand
 	(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.
 
+

+Corner Shaping Shorthands: the 'corner-shape' and 'corner-*-shape' shorthand properties

 
-

-The 'corner-*-shape' Shorthands And Longhands

-
-	
-	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: <>
-	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=]
-	

-
-	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 start/end gives the block axis side,
-	and the second the inline-axis side
-	(i.e. patterned as corner-block-inline-shape).
+

+Shaping The Corners Of One Side:
+The 'corner-*-shape' shorthands:

 
 	
 	Name: corner-top-shape, corner-right-shape, corner-bottom-shape, corner-left-shape,
@@ -610,6 +598,25 @@ The 'corner-*-shape' Shorthands And Longhands
 	That is, ''corner-block-start-shape: round square''
 	sets ''corner-start-start-shape: round; corner-start-end-shape: square;''.
 
+

+Shaping All Corners At Once:
+The 'corner-shape' 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
+	

+
+	The 'corner-shape' property specifies the shape of the box's corners,
+	within the region specified by 'border-radius'.
+
+

+Corner Sizing & Shaping Shorthands: the 'corner' and 'corner-*' shorthand properties

+
 

 Sizing & shaping a corner:
 The 'corner-top-left', 'corner-top-right',

From f3d26f8d9fd2b8c952b72abe0480889e8e3927a2 Mon Sep 17 00:00:00 2001
From: Guillaume 
Date: Fri, 5 Sep 2025 11:10:53 +0200
Subject: [PATCH 3/3] [css-borders-4] Clarify corner-shape expansion

---
 css-borders-4/Overview.bs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index 88b0cc14772..8514fccc543 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -613,6 +613,10 @@ The 'corner-shape' shorthand

 
 	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.
 
 

 Corner Sizing & Shaping Shorthands: the 'corner' and 'corner-*' shorthand properties