[css-backgrounds-4] Fix the border-color and border-clip grammars, and generally reformat. Fixes w3c#2916.

Author: tabatkins

css-backgrounds-4/Overview.bs

@@ -132,7 +132,7 @@ Painting Area: the 'background-clip' property</h3>
 
 	<pre class="propdef partial">
 	Name: background-clip
-	New Values: text, border
+	New Values: text | border
 	</pre>
 
 	Issue: Or should this be defining the <css>-webkit-background-clip</css> property,
@@ -155,98 +155,63 @@ Painting Area: the 'background-clip' property</h3>
 <h2 id="borders">
 	Borders</h2>
 
-	<h3 id="the-border-color">Line Colors: the 'border-color' properties</h3>
-
-	<table class="propdef">
-	  <tr>
-	    <th>Name:
-	    <td><dfn>border-top-color</dfn> ,
-	        <dfn>border-right-color</dfn>,
-	        <dfn>border-bottom-color</dfn>,
-	        <dfn>border-left-color</dfn>
-	  <tr>
-	    <th><a href="#values">Value</a>:
-	    <td><<color>>#
-	  <tr>
-	    <th>Initial:
-	    <td><a href="https://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
-	  <tr>
-	    <th>Applies to:
-	    <td>all elements
-	  <tr>
-	    <th>Inherited:
-	    <td>no
-	  <tr>
-	    <th>Percentages:
-	    <td>N/A
-	  <tr>
-	    <th>Computed value:
-	    <td>the computed color
-	  <tr>
-	    <th>Animatable:
-	    <td>See prose
-	</table>
-
-	<table class="propdef">
-	  <tr>
-	    <th>Name:
-	    <td><dfn id="border-color">border-color</dfn>
-	  <tr>
-	    <th><a href="#values">Value</a>:
-	    <td>(<<color>>{1,4})#
-	  <tr>
-	    <th>Initial:
-	    <td>(see individual properties)
-	  <tr>
-	    <th>Applies to:
-	    <td>all elements
-	  <tr>
-	    <th>Inherited:
-	    <td>no
-	  <tr>
-	    <th>Percentages:
-	    <td>N/A
-	  <tr>
-	    <th>Computed value:
-	    <td>see individual properties
-	  <tr>
-	    <th>Animatable:
-	    <td>see individual properties
-	</table>
-
-	<p>These properties set the foreground color of the border specified
-	by the <span class=property>border-style</span> properties.
+<h3 id="the-border-color">Line Colors: the 'border-color' properties</h3>
+
+	<pre class=propdef>
+	Name: border-top-color, border-right-color, border-bottom-color, border-left-color
+	Value: <<color>>#
+	Initial: currentcolor
+	Applies to: all elements
+	Inherited: no
+	Percentages: n/a
+	Computed Value: the computed color
+	Animation Type: see prose
+	</pre>
+
+	<pre class="propdef shorthand">
+	Name: border-color
+	Value: <<color>>{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),
+	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.
 
-	<p>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>.
-		Interpolation between borders with different numbers of colors is discrete.
+	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>.
+	Interpolation between borders with different numbers of colors is discrete.
 
-	<p>'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.
+	'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.
 
 	<div class="example">
 		Using multiple colors for each side:
 
-		<pre>
+		<pre class=lang-css>
+		.foo {
 			border: 30px solid;
 			border-color: skyblue orange yellowgreen indianred, black yellow;
+		}
 		</pre>
 
 		Sample rendering:
 
 		<img src="images/multicolor-border.png" alt="">
 
-		The same border colors with 'border-style: dotted':
+		The same border colors with ''border-style: dotted'':
 
 		<img src="images/multicolor-border-dotted.png" alt="">
 	</div>
 
-	Issue: The syntax for comma-separated multiple colors <a href="https://github.com/w3c/csswg-drafts/issues/1172#issuecomment-379878579">is still under active discussion</a> in the CSS WG.
+	Issue: The syntax for comma-separated multiple colors
+	<a href="https://github.com/w3c/csswg-drafts/issues/1172#issuecomment-379878579">is still under active discussion</a> in the CSS WG.
 
 <h2 id="corners">
 Corners</h2>