Various minor clarifications for border-radius:

  - Use more precise language and a more definite example in the section
    defining the center of corner transitions on the curve
  - Clarify section on internal table elements by reordering and linking
    to CSS2.1
  - Tweak wording on curve thickness interpolation to better link the
    sentences

Author: fantasai

css3-background/Overview.html

@@ -22,13 +22,13 @@
 
    <h1>CSS Backgrounds and Borders Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 January
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 January
     2010</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!--<a href="http://www.w3.org/TR/2010/CR-css3-background-20100121">http://www.w3.org/TR/2010/ED-css3-background-20100121</a>-->
+    <dd><!--<a href="http://www.w3.org/TR/2010/CR-css3-background-20100126">http://www.w3.org/TR/2010/ED-css3-background-20100126</a>-->
      <a
      href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
 
@@ -2414,7 +2414,7 @@ <h3 id=the-border-radius><span class=secno>4.4. </span>The &lsquo;<code
    not coincide with that of the outer border curve.) Likewise the content
    edge radius is the padding edge radius minus the corresponding padding, or
    if that is negative, zero. The border and padding thicknesses in the
-   curved region are interpolated from the adjoining sides. Thus when two
+   curved region are thus interpolated from the adjoining sides, and when two
    adjoining borders are of different thicknesses the corner will show a
    smooth transition between the thicker and thinner borders.
 
@@ -2457,11 +2457,12 @@ <h3 id=the-border-radius><span class=secno>4.4. </span>The &lsquo;<code
 
   <p>The center of color and style transitions between adjoining borders is
    at the point on the curve that is at an angle that is proportional to the
-   ratio of the border widths. For example, if the two widths are equal, that
-   point is at a 45&deg; angle, and if one is twice the width of the other
-   the point is at a 30&deg; angle. The line demarcating this transition is
-   drawn between the point at that angle on the outer curve and the point at
-   that angle on the inner curve.
+   ratio of the border widths. For example, if the top and right border
+   widths are equal, that point is at a 45&deg; angle from the horizontal,
+   and if the top is twice the width of the right the point is at a 30&deg;
+   angle from the horizontal. The line demarcating this transition is drawn
+   between the point at that angle on the outer arc and the point at that
+   angle on the inner arc.
 
   <p>Color and style transitions must be contained within the segment of the
    border that intersects the smallest rectangle that contains both border
@@ -2488,9 +2489,9 @@ <h3 id=the-border-radius><span class=secno>4.4. </span>The &lsquo;<code
     (represented in case D by the dark green region).
   </div>
 
-  <p>Corner curves must not overlap: When the sum of any two adjacent corner
+  <p>Corner curves must not overlap: When the sum of any two adjacent border
    radii exceeds the size of the border box, UAs must proportionally reduce
-   all corner radii until none of them overlap. The algorithm for reducing
+   all border radii until none of them overlap. The algorithm for reducing
    radii is as follows:
 
   <p>Let <var>f</var> =
@@ -2561,12 +2562,13 @@ <h3 id=the-border-radius><span class=secno>4.4. </span>The &lsquo;<code
    radii neither intersect nor extend past the boundaries of their respective
    corner cells.
 
-  <p>CSS3 UAs should ignore border-radius properties applied to internal
-   table elements when &lsquo;<code
-   class=property>border-collapse</code>&rsquo; is &lsquo;<code
-   class=css>collapse</code>&rsquo;. The effect of border-radius on internal
-   table elements is undefined in CSS3 Backgrounds and Borders, but may be
-   defined in a future specification.
+  <p>The effect of border-radius on <a
+   href="http://www.w3.org/TR/CSS21/tables.html#tables-intro">internal table
+   elements</a> is undefined in CSS3 Backgrounds and Borders, but may be
+   defined in a future specification. CSS3 UAs <em>should</em> ignore
+   border-radius properties applied to internal table elements when
+   &lsquo;<code class=property>border-collapse</code>&rsquo; is &lsquo;<code
+   class=css>collapse</code>&rsquo;.
 
   <div class=example>
    <p>This example draws ovals of 15em wide and 10em high:

css3-background/Overview.src.html

@@ -1735,7 +1735,7 @@ <h3 id="the-border-radius">The 'border-radius' properties</h3>
 might not coincide with that of the outer border curve.) Likewise the
 content edge radius is the padding edge radius minus the corresponding
 padding, or if that is negative, zero. The border and padding thicknesses
-in the curved region are interpolated from the adjoining sides. Thus
+in the curved region are thus interpolated from the adjoining sides, and
 when two adjoining borders are of different thicknesses the corner will
 show a smooth transition between the thicker and thinner borders.
 
@@ -1774,11 +1774,12 @@ <h3 id="the-border-radius">The 'border-radius' properties</h3>
 
 <p>The center of color and style transitions between adjoining borders
 is at the point on the curve that is at an angle that is proportional
-to the ratio of the border widths. For example, if the two widths are
-equal, that point is at a 45&deg; angle, and if one is twice the width
-of the other the point is at a 30&deg; angle. The line demarcating this
-transition is drawn between the point at that angle on the outer curve
-and the point at that angle on the inner curve.
+to the ratio of the border widths. For example, if the top and right
+border widths are equal, that point is at a 45&deg; angle from the
+horizontal, and if the top is twice the width of the right the point
+is at a 30&deg; angle from the horizontal. The line demarcating this
+transition is drawn between the point at that angle on the outer arc
+and the point at that angle on the inner arc.
 
 <p>Color and style transitions must be contained within the segment of
 the border that intersects the smallest rectangle that contains both
@@ -1805,9 +1806,9 @@ <h3 id="the-border-radius">The 'border-radius' properties</h3>
     (represented in case D by the dark green region).
 </div>
 
-<p>Corner curves must not overlap: When the sum of any two adjacent corner
+<p>Corner curves must not overlap: When the sum of any two adjacent border
 radii exceeds the size of the border box, UAs must proportionally reduce all
-corner radii until none of them overlap. The algorithm for reducing radii
+border radii until none of them overlap. The algorithm for reducing radii
 is as follows:
 
 <p>Let <var>f</var> = min(<var>L<sub>i</sub></var>/<var>S<sub>i</sub></var>),
@@ -1872,10 +1873,11 @@ <h3 id="the-border-radius">The 'border-radius' properties</h3>
 must be reduced by the same factor so that the radii neither intersect
 nor extend past the boundaries of their respective corner cells.
 
-<p>CSS3 UAs should ignore border-radius properties applied to internal
-table elements when 'border-collapse' is ''collapse''.
-The effect of border-radius on internal table elements is undefined in
-CSS3 Backgrounds and Borders, but may be defined in a future specification.
+<p>The effect of border-radius on <a href="http://www.w3.org/TR/CSS21/tables.html#tables-intro">internal
+table elements</a> is undefined in CSS3 Backgrounds and Borders, but may
+be defined in a future specification. CSS3 UAs <em>should</em> ignore
+border-radius properties applied to internal table elements when
+'border-collapse' is ''collapse''.
 
 <div class=example>
 <p>This example draws ovals of 15em wide and 10em high: