Replaced colors list in border-*-color by stripes() function

Author: SebastianZ

css-backgrounds-4/Overview.bs

@@ -185,7 +185,7 @@ Painting Area: the 'background-clip' property</h3>
 
 	<pre class=propdef>
 	Name: border-top-color, border-right-color, border-bottom-color, border-left-color
-	Value: <<color>>#
+	Value: <<color>> || <<stripes()>>
 	Initial: currentcolor
 	Applies to: all elements
 	Inherited: no
@@ -196,15 +196,21 @@ Painting Area: the 'background-clip' property</h3>
 
 	<pre class="propdef shorthand">
 	Name: border-color
-	Value: <<color>>#{1,4}
+	Value: [ <<color>> || <<stripes()>> ]{1,4}
 	</pre>
 
 	These properties set the foreground color of the border specified
 	by the 'border-style' properties.
-	If a list of values is provided, the border is split into equal width bands of each color
-	along the direction of the side the border is applied on
-	(i.e. split horizontally on left and right borders and vertically on top and bottom borders),
-	starting outwards.
+
+	The stripes defined by the <<stripes()>> function follow the direction of
+	the side the border is applied on (i.e. horizontally on left and
+	right borders and vertically on top and bottom borders), starting outwards.
+	With that, the corresponding 'border-*-width' property defines the total
+	width of the stripes.
+
+	The stripes are painted above a given <<color>>. This allows the <<color>>
+	value to serve as a fallback, so any transparent stripes let the color
+	shine through.
 
 	When interpolating between borders with the same number of colors,
 	interpolation is performed individually per color band as <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a>.
@@ -223,7 +229,10 @@ Painting Area: the 'background-clip' property</h3>
 		<pre class=lang-css>
 		.foo {
 			border: 30px solid;
-			border-color: skyblue orange yellowgreen indianred, black yellow;
+			border-top-color: stripes(skyblue, black);
+			border-right-color: stripes(orange, yellow);
+			border-bottom-color: stripes(yellowgreen, black);
+			border-left-color: stripes(indianred, yellow);
 		}
 		</pre>