+ Using multiple colors for each side: + +

+		.foo {
+			border: 30px solid;
+			border-color: stripes(dodgerblue, skyblue) stripes(yellow, gold) stripes(lightgreen, limegreen) stripes(indianred, orange);
+		}
+		

+ + Sample rendering: + + + + The same border colors with ''border-style: dotted'': + + +

-	Name: border-block-width, border-inline-width
-	Value: <<'border-top-width'>>{1,2}
+	Name: border-block-color, border-inline-color
+	Value: <<'border-top-color'>>{1,2}
 	

- Logical Border Styles: - the 'border-block-start-style', 'border-block-end-style', 'border-inline-start-style', 'border-inline-end-style' properties and 'border-block-style' and 'border-inline-style' shorthands

+Line Patterns: the 'border-style' properties

-	Name: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
-	Value: <<'border-top-style'>>
+	Name: border-top-style, border-right-style, border-bottom-style, border-left-style, border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
+	Value: <>
 	Initial: none
-	Applies to: Same as 'border-top-style'
+	Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
 	Inherited: no
 	Logical property group: border-style
-	Percentages: n/a
-	Computed value: Same as corresponding 'border-*-style' properties
+	Percentages: N/A
+	Computed value: specified keyword
 	Animation type: discrete
 	

 	Name: border-block-style, border-inline-style
@@ -105,54 +152,65 @@ Borders
 	respectively.
 	The first value represents the start edge style,
 	and the second value represents the end edge style.
-	If only one value is given, it applies to both the start and end edges.
+	If only one value is given,
+	it applies to both the start and end edges.
 
-

-	Logical Border Colors:
-	the 'border-block-start-color', 'border-block-end-color', 'border-inline-start-color', 'border-inline-end-color' properties and 'border-block-color' and 'border-inline-color' shorthands
+

+Line Thickness: the 'border-width' properties
 
 	
-	Name: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
-	Value: <<'border-top-color'>>
-	Initial: currentcolor
-	Applies to: Same as 'border-top-color'
+	Name: border-top-width, border-right-width, border-bottom-width, border-left-width, border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
+	Value: <>
+	Initial: medium
+	Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
 	Inherited: no
-	Logical property group: border-color
-	Percentages: n/a
-	Computed value: Same as corresponding 'border-*-color' properties
-	Animation type: by computed value type
+	Logical property group: border-width
+	Percentages: N/A
+	Computed value: absolute length, [=snapped as a border width=]; zero if the border style is ''border-style/none'' or ''border-style/hidden''
+	Animation Type: by computed value
 	
 
-	These properties correspond to the
-	'border-top-color', 'border-bottom-color', 'border-left-color', and 'border-right-color' properties.
-	The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
+	The logical properties 'border-block-start-width', 'border-block-end-width',
+	'border-inline-start-width', and 'border-inline-end-width' correspond to the
+	'border-top-width', 'border-bottom-width', 'border-left-width',
+	and 'border-right-width' properties.
+	The mapping depends on the element's 'writing-mode', 'direction',
+	and 'text-orientation'.
 
 	
-	Name: border-block-color, border-inline-color
-	Value: <<'border-top-color'>>{1,2}
+	Name: border-block-width, border-inline-width
+	Value: <<'border-top-width'>>{1,2}
 	
 
 	These two shorthand properties set the
-	'border-block-start-color' & 'border-block-end-color'
+	'border-block-start-width' & 'border-block-end-width'
 	and
-	'border-inline-start-color' & 'border-inline-end-color',
+	'border-inline-start-width' & 'border-inline-end-width',
 	respectively.
-	The first value represents the start edge color,
-	and the second value represents the end edge color.
-	If only one value is given, it applies to both the start and end edges.
+	The first value represents the start edge width,
+	and the second value represents the end edge width.
+	If only one value is given,
+	it applies to both the start and end edges.
 
-

-	Logical Border Shorthands:
-	the 'border-block-start', 'border-block-end', 'border-inline-start', 'border-inline-end' properties and 'border-block' and 'border-inline' shorthands
+

+Border Shorthand Properties
 
 	
-	Name: border-block-start, border-block-end, border-inline-start, border-inline-end
-	Value: <<'border-top-width'>> || <<'border-top-style'>> || <>
+	Name: border-top, border-right, border-bottom, border-left, border-block-start, border-block-end, border-inline-start, border-inline-end
+	Value: <> || <> || <>
+	Initial: See individual properties
+	Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
+	Inherited: no
+	Percentages: N/A
+	Computed value: see individual properties
+	Animation Type: see individual properties
 	
 
-	These properties correspond to the
+	The logical properties 'border-block-start', 'border-block-end',
+	'border-inline-start', and 'border-inline-end' correspond to the
 	'border-top', 'border-bottom', 'border-left', and 'border-right' properties.
-	The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
+	The mapping depends on the element's 'writing-mode', 'direction',
+	and 'text-orientation'.
 
 	
 	Name: border-block, border-inline
@@ -170,7 +228,7 @@ Borders
 		see discussion in https://github.com/w3c/csswg-drafts/issues/3519 -->
 
 

-Four-Directional Shorthand Properties: the 'border-width', 'border-style', and 'border-color' shorthands
+Four-Directional Shorthand Properties: the 'logical' keyword for 'border-width', 'border-style', and 'border-color'
 
 	The shorthand properties for borders
 	set values for physical properties by default.
@@ -234,89 +292,36 @@ Four-Directional Shorthand Properties: the 'border-width', 'border-style', and '
 		
 	
 
-

-Line Colors: the 'border-color' properties
-
-	
-		Name: border-top-color, border-right-color, border-bottom-color, border-left-color
-		Value: <> | <>
-		Initial: currentcolor
-		Applies to: all elements
-		Inherited: no
-		Logical property group: border-color
-		Percentages: n/a
-		Computed Value: the computed color and/or a one-dimensional image function
-		Animation type: see prose
-	
-
-	
-		Name: border-color
-		Value: [ <> | <> ]{1,4}
-	
-
-	These properties set the foreground color of the border specified
-	by the 'border-style' properties.
-
-	The stripes defined by <> follow the shape of the border
-	on the side to which they apply,
-	and are drawn in bands starting from the [=padding edge=] and progressing outwards.
-	The border width at each point
-	defines the |total width| of the stripes at that point.
-
-	'border-color' is a shorthand for the four 'border-*-color' properties.
-	The four values set the top, right, bottom and left border, 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.
-	This is resolved individually for each list item.
-
-	

-		Using multiple colors for each side:
-
-		
-		.foo {
-			border: 30px solid;
-			border-color: stripes(dodgerblue, skyblue) stripes(yellow, gold) stripes(lightgreen, limegreen) stripes(indianred, orange);
-		}
-		
-
-		Sample rendering:
-
-		
-
-		The same border colors with ''border-style: dotted'':
-
-		
-	
-
 

 Corners
 
-

-Logical Corner Rounding:
-the 'border-start-start-radius', 'border-start-end-radius', 'border-end-start-radius', 'border-end-end-radius' properties
+

+Corner Sizing: the 'border-*-*-radius' properties
 
-	
-	Name: border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
-	Value: <<'border-top-left-radius'>>
-	Initial: Same as 'border-top-left-radius'
-	Applies to: Same as 'border-top-left-radius'
+	
+	Name: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
+	Value: <>{1,2}
+	Initial: 0
+	Applies to: all elements (but see prose)
 	Inherited: no
 	Logical property group: border-radius
-	Percentages: Same as 'border-top-left-radius'
-	Computed value: Same as corresponding physical 'border-*-radius' properties
-	Animation type: by computed value type
+	Percentages: Refer to corresponding dimension of the border box.
+	Computed value: pair of computed <> values
+	Animation Type: by computed value
 	
 
-	These properties correspond to the
-	'border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius', and 'border-bottom-right-radius' properties.
-	The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation',
+	The logical properties 'border-start-start-radius', 'border-start-end-radius',
+	'border-end-start-radius', and 'border-end-end-radius' correspond to the
+	'border-top-left-radius', 'border-bottom-left-radius',
+	'border-top-right-radius', and 'border-bottom-right-radius' properties.
+	The mapping depends on the element's 'writing-mode', 'direction',
+	and 'text-orientation',
 	with the first start/end giving the block axis side,
 	and the second the inline-axis side
 	(i.e. patterned as 'border-block-inline-radius').
 
 

-Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties
+Corner Sizing Shorthands: the 'border-radius' and 'border-*-radius' shorthand properties
 
 

 Sizing The Corners Of One Side:

From 0f9dc00861c39a2555fd33e3594afe2b55ff0d43 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner 
Date: Mon, 20 Nov 2023 21:27:05 +0100
Subject: [PATCH 3/6] [css-borders-4] Removed section defining 'logical'
 keyword

---
 css-borders-4/Overview.bs | 65 ---------------------------------------
 1 file changed, 65 deletions(-)

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index 8a37d52a86a..3a089ff743e 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -227,71 +227,6 @@ Border Shorthand Properties
 	
 
-

-Four-Directional Shorthand Properties: the 'logical' keyword for 'border-width', 'border-style', and 'border-color'
-
-	The shorthand properties for borders
-	set values for physical properties by default.
-	But authors can specify
-	the logical keyword
-	at the beginning of the property value
-	to indicate that the values map to the Logical properties instead of the physical ones.
-
-	

-		The proposed syntax for this feature is under discussion
-		and is almost guaranteed to change from what is described here.
-		This section remains in the draft to promote discussion of alternatives,
-		to document the affected properties,
-		and to specify the expected impact on the interpretation
-		of whatever syntactic switch is ultimately chosen.
-
-	The following [[!CSS2]] border shorthand properties
-	accept the ''margin/logical'' keyword:
-	

-		
'border-width'
-		
'border-style'
-		
'border-color'
-	
-
-	The syntax for these properties is effectively changed by replacing
-		
<value-type>{1,4}
-
-	with
-		
logical? <value-type>{1,4}
-
-	When the ''margin/logical'' keyword is present in the value,
-	the values that follow are assigned to its Logical longhands
-	as follows:
-
-	

-		
If only one value is set,
-		the value applies to all four Logical longhands.
-		
If two values are set, the first is for block-start and block-end,
-		the second is for inline-start and inline-end.
-		
If three values are set, the first is for block-start,
-		the second is for inline-start and inline-end,
-		and the third is for block-end.
-		
If four values are set, they apply to
-		the block-start, inline-start, block-end, and inline-end sides
-		in that order.
-	
-
-	

-		In the following example, the two rules are equivalent:
-
-		
-		blockquote {
-			border: logical 1em 2em 3em 4em;
-		}
-		blockquote {
-			border-block-start:  1em;
-			border-inline-start: 2em;
-			border-block-end:    3em;
-			border-inline-end:   4em;
-		}
-		
-	
-
 

 Corners
 

From 55486e11a01748198d91a4a70eeae7ecdad06760 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner 
Date: Fri, 24 Nov 2023 00:39:05 +0100
Subject: [PATCH 4/6] [css-borders-4] Improved formatting

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

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index 3a089ff743e..4ed308de8fc 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -29,7 +29,7 @@ Introduction
 		This module is currently maintained as a diff against
 		the parts related to borders and box decorations of
 		CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
-		We will fold in the text once it's all formatted up and in CR again,
+		We will fold in the text once it’s all formatted up and in CR again,
 		as this will reduce the effort of keeping them in sync
 		(source diffs will be accurate in reflecting the differences).
 
@@ -96,12 +96,17 @@ Line Colors: the 'border-color' properties
 	and a missing right is also the same as top.
 	This is resolved individually for each list item.
 
-	The logical properties 'border-block-start-color', 'border-block-end-color',
-	'border-inline-start-color', and 'border-inline-end-color' correspond to the
-	'border-top-color', 'border-bottom-color', 'border-left-color',
-	and 'border-right-color' properties.
-	The mapping depends on the element's 'writing-mode', 'direction',
-	and 'text-orientation'.
+	The [=flow-relative=] properties
+	'border-block-start-color',
+	'border-block-end-color',
+	'border-inline-start-color',
+	and 'border-inline-end-color'
+	correspond to the [=physical=] properties
+	'border-top-color',
+	'border-bottom-color',
+	'border-left-color',
+	and 'border-right-color'.
+	The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.
 
 	
 	Name: border-block-color, border-inline-color
@@ -133,12 +138,17 @@ Line Patterns: the 'border-style' properties
 	Animation type: discrete
 	
 
-	The logical properties 'border-block-start-style', 'border-block-end-style',
-	'border-inline-start-style', and 'border-inline-end-style' correspond to the
-	'border-top-style', 'border-bottom-style', 'border-left-style',
-	and 'border-right-style' properties.
-	The mapping depends on the element's 'writing-mode', 'direction',
-	and 'text-orientation'.
+	The [=flow-relative=] properties
+	'border-block-start-style',
+	'border-block-end-style',
+	'border-inline-start-style',
+	and 'border-inline-end-style'
+	correspond to the [=physical=] properties
+	'border-top-style',
+	'border-bottom-style',
+	'border-left-style',
+	and 'border-right-style'.
+	The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.
 
 	
 	Name: border-block-style, border-inline-style
@@ -170,12 +180,17 @@ Line Thickness: the 'border-width' properties
 	Animation Type: by computed value
 	
 
-	The logical properties 'border-block-start-width', 'border-block-end-width',
-	'border-inline-start-width', and 'border-inline-end-width' correspond to the
-	'border-top-width', 'border-bottom-width', 'border-left-width',
-	and 'border-right-width' properties.
-	The mapping depends on the element's 'writing-mode', 'direction',
-	and 'text-orientation'.
+	The [=flow-relative=] properties
+	'border-block-start-width',
+	'border-block-end-width',
+	'border-inline-start-width',
+	and 'border-inline-end-width'
+	correspond to the [=physical=] properties
+	'border-top-width',
+	'border-bottom-width',
+	'border-left-width',
+	and 'border-right-width'.
+	The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.
 
 	
 	Name: border-block-width, border-inline-width
@@ -206,11 +221,17 @@ Border Shorthand Properties
 	Animation Type: see individual properties
 	
 
-	The logical properties 'border-block-start', 'border-block-end',
-	'border-inline-start', and 'border-inline-end' correspond to the
-	'border-top', 'border-bottom', 'border-left', and 'border-right' properties.
-	The mapping depends on the element's 'writing-mode', 'direction',
-	and 'text-orientation'.
+	The [=flow-relative=] properties
+	'border-block-start',
+	'border-block-end',
+	'border-inline-start',
+	and 'border-inline-end'
+	correspond to the [=physical=] properties
+	'border-top',
+	'border-bottom',
+	'border-left',
+	and 'border-right'.
+	The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.
 
 	
 	Name: border-block, border-inline
@@ -245,12 +266,17 @@ Corner Sizing: the 'border-*-*-radius' properties
 	Animation Type: by computed value
 	
 
-	The logical properties 'border-start-start-radius', 'border-start-end-radius',
-	'border-end-start-radius', and 'border-end-end-radius' correspond to the
-	'border-top-left-radius', 'border-bottom-left-radius',
-	'border-top-right-radius', and 'border-bottom-right-radius' properties.
-	The mapping depends on the element's 'writing-mode', 'direction',
-	and 'text-orientation',
+	The [=flow-relative=] properties
+	'border-start-start-radius',
+	'border-start-end-radius',
+	'border-end-start-radius',
+	and 'border-end-end-radius'
+	correspond to the [=physical=] properties
+	'border-top-left-radius',
+	'border-bottom-left-radius',
+	'border-top-right-radius',
+	and 'border-bottom-right-radius'.
+	The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation',
 	with the first start/end giving the block axis side,
 	and the second the inline-axis side
 	(i.e. patterned as 'border-block-inline-radius').

From 9d9a5335dc2d60da3afd2f711e391a00d10ccd68 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner 
Date: Fri, 24 Nov 2023 00:45:06 +0100
Subject: [PATCH 5/6] [css-borders-4] Renamed 'edge' to 'side'

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

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index 4ed308de8fc..c184407ce7b 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -118,10 +118,10 @@ Line Colors: the 'border-color' properties
 	and
 	'border-inline-start-color' & 'border-inline-end-color',
 	respectively.
-	The first value represents the start edge color,
-	and the second value represents the end edge color.
+	The first value represents the start side color,
+	and the second value represents the end side color.
 	If only one value is given,
-	it applies to both the start and end edges.
+	it applies to both the start and end sides.
 
 

 Line Patterns: the 'border-style' properties
@@ -160,10 +160,10 @@ Line Patterns: the 'border-style' properties
 	and
 	'border-inline-start-style' & 'border-inline-end-style',
 	respectively.
-	The first value represents the start edge style,
-	and the second value represents the end edge style.
+	The first value represents the start side style,
+	and the second value represents the end side style.
 	If only one value is given,
-	it applies to both the start and end edges.
+	it applies to both the start and end sides.
 
 

 Line Thickness: the 'border-width' properties
@@ -202,10 +202,10 @@ Line Thickness: the 'border-width' properties
 	and
 	'border-inline-start-width' & 'border-inline-end-width',
 	respectively.
-	The first value represents the start edge width,
-	and the second value represents the end edge width.
+	The first value represents the start side width,
+	and the second value represents the end side width.
 	If only one value is given,
-	it applies to both the start and end edges.
+	it applies to both the start and end sides.
 
 

 Border Shorthand Properties

From 84c2e482e8d987549d8d00fc46bb4a0c2bdaa6cc Mon Sep 17 00:00:00 2001
From: Sebastian Zartner 
Date: Sat, 16 Dec 2023 23:31:58 +0100
Subject: [PATCH 6/6] [css-borders-4][editorial] Removed now incorrect note
 about flow-relative border properties being renamed to "logical"

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

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index c184407ce7b..ea0c808d6fd 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -1000,7 +1000,6 @@ Additions since [[CSS3BG]]
 	* added partial borders via 'border-limit' and 'border-*-clip' properties
 	* turned 'box-shadow' into a shorthand and added longhands
 	* moved logical border properties from [[CSS-LOGICAL-1]] to this spec.
-		and called them "logical" instead of "flow-relative" like in other specs
 
 

 Acknowledgments