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

* [css-values-4] Syntax rewrite with property value range productions

* [css-borders-4] Reorganize corner sections

* [css-borders-4] Clarify corner-shape expansion

Author: cdoublev

css-borders-4/Overview.bs

@@ -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>.
@@ -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> |
@@ -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'
@@ -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',
@@ -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
@@ -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
@@ -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