[css-backgrounds-4] Added border-*-radius shorthands (#7705)

Defined the physical shorthand properties `border-top-radius`, `border-right-radius`, `border-bottom-radius`, and `border-left-radius` and the logical shorthand properties `border-block-start-radius`, `border-block-end-radius`, `border-inline-start-radius`, `border-inline-end-radius`.

Author: SebastianZ

css-backgrounds-4/Overview.bs

@@ -242,8 +242,52 @@ Painting Area: the 'background-clip' property</h3>
 <h2 id="corners">
 Corners</h2>
 
-<h3 id=corner-sizing>
-Corner Sizing: the 'border-radius' property</h3>
+<h3 id="corner-sizing">
+Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties</h3>
+
+<h4 id="corner-sizing-side-shorthands">
+Sizing The Corners Of One Side:
+The 'border-top-radius', 'border-right-radius',
+'border-bottom-radius', 'border-left-radius',
+'border-block-start-radius', 'border-block-end-radius',
+'border-inline-start-radius', 'border-inline-end-radius' shorthands</h4>
+
+	<pre class=propdef>
+		Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius,
+			border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
+		Value: <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{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
+		Animatable: see individual properties
+	</pre>
+
+	<p>The 'border-*-radius' shorthands set the two 'border-*-*-radius'
+	longhand properties of the related side. If values are given before
+	and after the slash, then the values before the slash set the
+	horizontal radius and the values after the slash set the vertical radius.
+	If there is no slash, then the values set both radii equally.
+	The two values for the radii are given in the order
+	top-left, top-right for 'border-top-radius',
+	top-right, bottom-right for 'border-right-radius',
+	bottom-left, bottom-right for 'border-bottom-radius',
+	top-left, bottom-left for 'border-left-radius',
+	start-start, start-end for 'border-block-start-radius',
+	end-start, end-end for 'border-block-end-radius'
+	start-start, end-start for 'border-inline-start-radius',
+	and start-end, end-end for 'border-inline-end-radius'.
+	If the second value is omitted it is copied from the first.
+
+	<p class="issue">
+		Should the physical values all be defined as left to right and top to bottom
+		and the logical ones as start to end
+		or should they follow the clockwise order of ''border-radius''?
+
+<h4 id="corner-sizing-shorthand">
+Sizing All Corners At Once:
+The 'border-radius' shorthand</h4>
 
 	<pre class="propdef">
 		Name: border-radius