[css-borders-4] Specify the corner-* shorthands (w3c#12660)

* [css-borders-4] Specify the corner-* shorthands

This specifies 17 shorthands for corner-shape/border-radius
- corner-*-* (4 physical, 4 logical) for each corner
- corner-* (4 physical, 4 logical) for each side
- corner (for specifying all the corners/border-radius in one go)

Resolution: w3c#11623 (comment)

Closes w3c#11623

* Update css-borders-4/Overview.bs

* Update css-borders-4/Overview.bs

* Update css-borders-4/Overview.bs

* Update css-borders-4/Overview.bs

---------

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

Author: noamr

css-borders-4/Overview.bs

@@ -610,6 +610,71 @@ 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="single-corner-shorthands">
+Sizing & shaping a corner:
+The 'corner-top-left', 'corner-top-right',
+'corner-bottom-right', 'corner-bottom-left',
+'corner-start-start', 'corner-start-end',
+'corner-end-start', 'corner-end-end' shorthands</h4>
+
+	<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>>
+		Initial: 0
+		Applies to: all elements (but see prose)
+		Inherited: no
+		Percentages: Refer to corresponding dimension of the <a>border box</a>.
+		Computed value: see individual properties
+		Animation type: see individual properties
+	</pre>
+
+	The 'corner-*-*' shorthands set the two 'corner-*-*-shape' and 'border-*-*-radius'
+	longhand properties of the related side.
+	See the corresponding 'corner-*-*-shape' and 'border-*-*-radius' properties for further details.
+
+
+<h4 id="corner-side-shorthands">
+Sizing & shaping rhe Corners Of One Side:
+The 'corner-top', 'corner-right',
+'corner-bottom', 'corner-left',
+'corner-block-start', 'corner-block-end',
+'corner-inline-start', 'corner-inline-end' shorthands</h4>
+
+	<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}
+		Initial: 0
+		Applies to: all elements (but see prose)
+		Inherited: no
+		Percentages: Refer to corresponding dimension of the <a>border box</a>.
+		Computed value: see individual properties
+		Animation type: see individual properties
+	</pre>
+
+	The 'corner-*' shorthands set the two 'corner-*-shape' longhand properties and two 'border-*-radius'
+	longhand properties of the related side.
+	See the corresponding 'corner-*-shape' and 'border-*-radius' properties for further details.
+
+<h4 id="corner-shorthand">
+Sizing & Shaping All Corners At Once:
+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}
+		Initial: 0
+		Applies to: all elements (but see prose)
+		Inherited: no
+		Percentages: Refer to corresponding dimension of the <a>border box</a>.
+		Computed value: see individual properties
+		Animation type: see individual properties
+	</pre>
+
+	The 'corner' shorthand sets the 'corner-shape' and 'border-radius' longhands all together.
+
+
 <h4 id=corner-shape-rendering>
 Rendering 'corner-shape'</h4>