[css-borders-4] Added 'border-*-clip' shorthands (#13143)

Added the two shorthand properties 'border-block-clip' and 'border-inline-clip', split 'border-clip' out, added a "Logical property group" entry to the longhands definition, clarified their definition a bit and fixed the related examples.

Author: SebastianZ

css-borders-4/Overview.bs

@@ -1239,9 +1239,9 @@ Corner Shaping: the 'corner-*-shape' properties</h3>
 	set the corner shape for the given corner.
 
 	The [=flow-relative=] longhands
-	('corner-start-start-shape', etc)
+	('corner-start-start-shape', etc.)
 	correspond to the [=physical=] longhands
-	('corner-top-left-shape', etc)
+	('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
@@ -1350,18 +1350,18 @@ The 'corner-*-shape' shorthands:</h4>
 	Value: <<'corner-top-left-shape'>>{1,2}
 	</pre>
 
-	The 'corner-*-shape'/etc shorthands set the two 'corner-*-*-shape'
+	The 'corner-*-shape' shorthands set the two 'corner-*-*-shape'
 	properties of the related side.
 	If only one value is given,
 	the second value defaults to the same value.
 
-	For the physical shorthands ('corner-top-shape', etc),
+	For the physical shorthands ('corner-top-shape', etc.),
 	the values are either in left/right order, or top/bottom order,
 	whichever axis is meaningful for the property.
 	That is, ''corner-top-shape: round square''
 	sets ''corner-top-left-shape: round; corner-top-right-shape: square;''.
 
-	For the logical shorthands ('corner-block-start-shape', etc),
+	For the logical shorthands ('corner-block-start-shape', etc.),
 	the values are always in start/end order in the other axis.
 	That is, ''corner-block-start-shape: round square''
 	sets ''corner-start-start-shape: round; corner-start-end-shape: square;''.
@@ -2451,11 +2451,12 @@ Partial Borders: the 'border-limit' property</h3>
 The 'border-clip' properties</h3>
 
 	<pre class="propdef">
-		Name: border-clip, border-top-clip, border-right-clip, border-bottom-clip, border-left-clip,
+		Name: border-top-clip, border-right-clip, border-bottom-clip, border-left-clip,
 			border-block-start-clip, border-block-end-clip, border-inline-start-clip, border-inline-end-clip
 		Value: normal | [ <<length-percentage [0,&infin;]>> | <<flex>> ]+
 		Initial: normal
 		Inherited: no
+		Logical property group: border-clip
 		Percentages: refer to length of border-edge side
 		Computed value: ''border-clip/normal'', or a list consisting of absolute lengths, or percentages as specified
 		Animation type: by computed value
@@ -2469,21 +2470,44 @@ The 'border-clip' properties</h3>
 	The ''border-clip/normal'' value means
 	that the border is not split, but shown normally.
 
-	<p>'border-clip' is a shorthand property for the four individual properties.
+	The [=flow-relative=] longhands
+	('border-block-start-clip', etc.)
+	correspond to the [=physical=] longhands
+	('border-top-clip', etc.)
+	depending on the element’s 'writing-mode', 'direction', and 'text-orientation'.
+
+	<pre class="propdef shorthand">
+		Name: border-block-clip, border-inline-clip
+		Value: <'border-top-clip'>
+	</pre>
+
+	These two [=shorthand properties=] set the
+	'border-block-start-clip' &amp; 'border-block-end-clip'
+	and
+	'border-inline-start-clip' &amp; 'border-inline-end-clip',
+	respectively.
+
+	<pre class="propdef shorthand">
+		Name: border-clip
+		Value: <'border-top-clip'>
+	</pre>
+
+	'border-clip' is a [=shorthand property=] for the longhand properties,
+	setting all four sides to the same value.
 
-	<p>If the listed parts are shorter than the border, any remaining
+	If the listed parts are shorter than the border, any remaining
 	border is split proportionally between the specified flexible lengths. If
 	there are no flexible lengths, the behavior is as if ''1fr'' had been
 	specified at the end of the list.
 
-	<p>If the listed parts are longer than the border, the specified parts
+	If the listed parts are longer than the border, the specified parts
 	will be shown in full until the end of the border. In this case, all
 	flexible lengths will be zero.
 
-	<p>For horizontal borders, parts are listed from left to right. For
+	For horizontal borders, parts are listed from left to right. For
 	vertical borders, parts are listed from top to bottom.
 
-	<p>The exact border parts are determined by laying out the specified border
+	The exact border parts are determined by laying out the specified border
 	parts with all flexible lengths initially set to zero. Any remaining border is
 	split proportionally between the flexible lengths specified.
 
@@ -2500,10 +2524,10 @@ The 'border-clip' properties</h3>
 
 	<div class="example">
 		<pre>
-			border-clip-top: 10px 1fr 10px;
-			border-clip-bottom: 10px 1fr 10px;
-			border-clip-right: 5px 1fr 5px;
-			border-clip-left: 5px 1fr 5px;
+			border-top-clip: 10px 1fr 10px;
+			border-bottom-clip: 10px 1fr 10px;
+			border-right-clip: 5px 1fr 5px;
+			border-left-clip: 5px 1fr 5px;
 		</pre>
 		<div style="position: relative; width: 250px; height: 150px; background: white;">
 			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
@@ -2518,10 +2542,10 @@ The 'border-clip' properties</h3>
 		the previous example can easily be created:
 
 		<pre>
-			border-clip-top: 0 10px 1fr 10px;
-			border-clip-bottom: 0 10px 1fr 10px;
-			border-clip-right: 0 5px 1fr 5px;
-			border-clip-left: 0 5px 1fr 5px;
+			border-top-clip: 0 10px 1fr 10px;
+			border-bottom-clip: 0 10px 1fr 10px;
+			border-right-clip: 0 5px 1fr 5px;
+			border-left-clip: 0 5px 1fr 5px;
 		</pre>
 
 		<div style="position: relative; width: 250px; height: 150px; background: white;">
@@ -2538,8 +2562,8 @@ The 'border-clip' properties</h3>
 		<pre>
 			border: thin solid black;
 			border-clip: 0 1fr; /* hide borders */
-			border-clip-top: 10px 1fr 10px; /* make certain borders visible */
-			border-clip-bottom: 10px 1fr 10px;
+			border-top-clip: 10px 1fr 10px; /* make certain borders visible */
+			border-bottom-clip: 10px 1fr 10px;
 		</pre>
 
 		<div style="position: relative; width: 250px; height: 150px; background: white;">
@@ -2554,8 +2578,8 @@ The 'border-clip' properties</h3>
 		<pre>
 			border-top: thin solid black;
 			border-bottom: thin solid black;
-			border-clip-top: 10px;
-			border-clip-bottom: 10px;
+			border-top-clip: 10px;
+			border-bottom-clip: 10px;
 		</pre>
 
 		<div style="position: relative; width: 250px; height: 150px; background: white;">
@@ -2602,7 +2626,7 @@ The 'border-clip' properties</h3>
 	<div class="example">
 		<pre>
 			border: 4px solid black;
-			border-clip-top: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
+			border-top-clip: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
 		</pre>
 		<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
 		<div style="position: relative; width: 192px; background: white; padding: 40px">
@@ -2619,7 +2643,7 @@ The 'border-clip' properties</h3>
 	<div class="example">
 		<pre>
 			border: 4px solid black;
-			border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
+			border-top-clip: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
 		</pre>
 
 		<p>All but one of the visible border parts are represented as flexible lengths in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px:
@@ -3201,7 +3225,7 @@ First Public Working Draft</a> of 22 July 2025
 	* renamed <code>corners</code> to 'corner'
 	* Added Web Platform Tests coverage
 	* incorporated full text of [[CSS3BG]] related to borders and shadows
-	* Renamed 'border-clip-*' properties to 'border-*-clip' and added logical longhands
+	* Renamed 'border-clip-*' properties to 'border-*-clip' and added logical longhands and shorthands
 	* Added new syntax for 'border-*-*-radius' longhands using a slash to separate horizontal and vertical radii
 
 <h3 class=no-num id="level-changes">