Borders

- Should logical border properties be moved from - CSS Logical - to here? +

The border can either be a predefined style (solid line, double + line, dotted line, pseudo-3D border, etc.) or it can be an image. In + the former case, various properties define the style ('border-style'), + color ('border-color'), and thickness ('border-width') of the border. -

+

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-top-color, border-right-color, border-bottom-color, border-left-color, border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
+	Value: <> | <>
+	Initial: currentcolor
+	Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
+	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
 	
 
 	
@@ -70,13 +70,6 @@ Line Colors: the 'border-color' properties
 	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:
 
@@ -96,11 +89,200 @@ Line Colors: the 'border-color' properties
 		
 	
 
+	'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.
+
+	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
+	Value: <<'border-top-color'>>{1,2}
+	
+
+	These two shorthand properties set the
+	'border-block-start-color' & 'border-block-end-color'
+	and
+	'border-inline-start-color' & 'border-inline-end-color',
+	respectively.
+	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 sides.
+
+

+Line Patterns: the 'border-style' properties
+
+	
+	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: all elements except [=ruby base containers=] and [=ruby annotation containers=]
+	Inherited: no
+	Logical property group: border-style
+	Percentages: N/A
+	Computed value: specified keyword
+	Animation type: discrete
+	
+
+	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
+	Value: <<'border-top-style'>>{1,2}
+	
+
+	These two shorthand properties set the
+	'border-block-start-style' & 'border-block-end-style'
+	and
+	'border-inline-start-style' & 'border-inline-end-style',
+	respectively.
+	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 sides.
+
+

+Line Thickness: the 'border-width' properties
+
+	
+	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-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
+	
+
+	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
+	Value: <<'border-top-width'>>{1,2}
+	
+
+	These two shorthand properties set the
+	'border-block-start-width' & 'border-block-end-width'
+	and
+	'border-inline-start-width' & 'border-inline-end-width',
+	respectively.
+	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 sides.
+
+

+Border Shorthand Properties
+
+	
+	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
+	
+
+	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
+	Value: <<'border-block-start'>>
+	
+
+	These two shorthand properties set the
+	'border-block-start' & 'border-block-end'
+	or
+	'border-inline-start' & 'border-inline-end',
+	respectively,
+	both to the same style.
+
+	
+
 

 Corners
 
+

+Corner Sizing: the 'border-*-*-radius' properties
+
+	
+	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: Refer to corresponding dimension of the border box.
+	Computed value: pair of computed <> values
+	Animation Type: by computed value
+	
+
+	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').
+
 

-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:
@@ -817,6 +999,7 @@ Additions since [[CSS3BG]]
 	* added 'corner-shape' and related 'corners' shorthand
 	* 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.
 
 

 Acknowledgments