[css-backgrounds] Fix wording around small border-radius vs shadow spread, and apply same wording to margin curve.

Author: tabatkins

css-backgrounds/Overview.html

@@ -28,7 +28,7 @@
     code { font-size: inherit; }
     pre { text-align: left; }
     #box-shadow-samples td { background: white; color: black; }
-    .css::before, .css::after { content: none !important;}
+    .css::before, .css::after, .property::before, .property::after { content: none !important;}
   </style>
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    type="text/css">
@@ -2921,10 +2921,11 @@ <h3 id=corner-shaping><span class=secno>5.2. </span>Corner Shaping</h3>
 
   <p>The margin edge, being outside the border edge, calculates its radius by
    adding the corresponding margin thickness to each border radius. However,
-   in order to create a sharper corner when the border radius is small, if
-   the ratio <var>r</var> of the border radius to the margin is less than one
-   the margin thickness is multiplied by the proportion 1 +
-   (<var>r</var>-1)<sup>3</sup> in this calculation.
+   in order to create a sharper corner when the border radius is small, when
+   the <i>border radius</i> is less than the margin, the margin is multiplied
+   by the proportion 1 + (<var>r</var>-1)<sup>3</sup>, where <var>r</var> is
+   the ratio of the border radius to the margin, in calculating the corner
+   radii of the margin box shape.
 
   <h3 id=corner-clipping><span class=secno>5.3. </span>Corner Clipping</h3>
 
@@ -4112,17 +4113,18 @@ <h4 id=shadow-shape><span class=secno>7.1.1. </span> Shadow Shape, Spread,
    the shadow are also increased (decreased, for inner shadows) from the
    border-box radii by adding the <a href="#spread-distance"><i>spread
    distance</i></a> (and flooring at zero). However, in order to create a
-   sharper corner when the border radius is small, when the ratio
-   <var>r</var> of a border radius to the <a
-   href="#spread-distance"><i>spread distance</i></a> is less than one, the
-   <a href="#spread-distance"><i>spread distance</i></a> is multiplied by the
-   proportion 1 + (<var>r</var>-1)<sup>3</sup> in calculating the corner
-   radii of the spread shadow shape. For example, if the border radius is
-   10px and the <a href="#spread-distance"><i>spread distance</i></a> is 20px
-   (<var>r</var> = .5), the corner radius of the shadow shape will be 10px +
-   20px×(1 + (.5 - 1)<sup>3</sup>) = 27.5px. This adjustment is applied
-   independently to the radii in each dimension, and does not apply to
-   negative spread distances.
+   sharper corner when the border radius is small, when the <i>border
+   radius</i> is less than the <a href="#spread-distance"><i>spread
+   distance</i></a>, the <a href="#spread-distance"><i>spread
+   distance</i></a> is multiplied by the proportion 1 +
+   (<var>r</var>-1)<sup>3</sup>, where <var>r</var> is the ratio of the
+   border radius to the <a href="#spread-distance"><i>spread
+   distance</i></a>, in calculating the corner radii of the spread shadow
+   shape. For example, if the border radius is 10px and the <a
+   href="#spread-distance"><i>spread distance</i></a> is 20px (<var>r</var> =
+   .5), the corner radius of the shadow shape will be 10px + 20px × (1 + (.5
+   - 1)<sup>3</sup>) = 27.5px. This adjustment is applied independently to
+   the radii in each dimension.
 
   <p>The ‘<a href="#border-image"><code
    class=property>border-image</code></a>’ does not affect the shape of the

css-backgrounds/Overview.src.html

@@ -14,7 +14,7 @@
     code { font-size: inherit; }
     pre { text-align: left; }
     #box-shadow-samples td { background: white; color: black; }
-    .css::before, .css::after { content: none !important;}
+    .css::before, .css::after, .property::before, .property::after { content: none !important;}
   </style>
   <link rel="stylesheet" type="text/css"
   href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
@@ -2062,9 +2062,10 @@ <h3 id="corner-shaping">Corner Shaping</h3>
 <p>The margin edge, being outside the border edge, calculates its radius
 by adding the corresponding margin thickness to each border radius.
 However, in order to create a sharper corner when the border radius is small,
-if the ratio <var>r</var> of the border radius to the margin is less than one
-the margin thickness is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>
-in this calculation.
+when the <i>border radius</i> is less than the margin,
+the margin is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
+where <var>r</var> is the ratio of the border radius to the margin,
+in calculating the corner radii of the margin box shape.
 
 <h3 id="corner-clipping">Corner Clipping</h3>
 
@@ -2981,13 +2982,13 @@ <h4 id="shadow-shape">
   the corner radii of the shadow are also increased (decreased, for inner shadows)
   from the border-box radii by adding the <i>spread distance</i> (and flooring at zero).
   However, in order to create a sharper corner when the border radius is small,
-  when the ratio <var>r</var> of a border radius to the <i>spread distance</i> is less than one,
-  the <i>spread distance</i> is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>
+  when the <i>border radius</i> is less than the <i>spread distance</i>,
+  the <i>spread distance</i> is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
+  where <var>r</var> is the ratio of the border radius to the <i>spread distance</i>,
   in calculating the corner radii of the spread shadow shape.
   For example, if the border radius is 10px and the <i>spread distance</i> is 20px (<var>r</var> = .5),
-  the corner radius of the shadow shape will be 10px + 20px&times;(1 + (.5 - 1)<sup>3</sup>) = 27.5px.
-  This adjustment is applied independently to the radii in each dimension,
-  and does not apply to negative spread distances.
+  the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)<sup>3</sup>) = 27.5px.
+  This adjustment is applied independently to the radii in each dimension.
 
   <p>The 'border-image' does not affect the shape of the box-shadow.