[css-borders-4] Applied latest changes of CSS Backgrounds 3

This applies the changes of 433051c to CSS Borders 4.

Author: SebastianZ

css-borders-4/Overview.bs

@@ -628,13 +628,30 @@ Corners</h2>
 
 	The [=margin edge=], being outside the [=border edge=],
 	calculates its radius by <em>adding</em> the corresponding margin thickness
-	to each border radius.
-	However, in order to create a sharper corner when the border radius is small
-	(and thus ensure continuity between round and sharp corners),
-	when the [=border radius=] 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.
+	to each border radius, with the corresponding [=outset-adjusted border radius=] applied.
+
+<div algorithm="border-radius-outset">
+
+	When expanding an [=edge=] that has a [=border radius=], e.g. for computing the [=margin edge=], 'box-shadow' spread, or 'overflow-clip-margin',
+	the different [=border radius=] values are adjusted so that a small rounded corner with a big outset does not appear to be disproportionally round.
+
+	This is done by computing the corresponding [=outset-adjusted border radius=].
+
+	To compute the <dfn export>outset-adjusted border radius</dfn> given the 2-dimensional [=size=]s |edge|, |radius|, and |outset|:
+		1. Let |coverage| be <code>2 * min(|radius|'s [=width=] / |edge|'s [=width=], |radius|'s [=height=] / |edge|'s [=height=])</code>.
+		1. Let |adustedRadiusWidth| be the [=adjusted radius dimension=] given |coverage|, |radius|'s [=width=], and |outset|'s [=width=].
+		1. Let |adustedRadiusHeight| be the [=adjusted radius dimension=] given |coverage|, |radius|'s [=height=], and |outset|'s [=height=].
+		1. Return (|adustedRadiusWidth|, |adustedRadiusHeight|).
+
+	To compute the <dfn>adjusted radius dimension</dfn> given numbers |coverage|, |radius|, and |outset|:
+		1. If |radius| is greater than |spread|, or if |coverage| is greater than 1, then return <code>|radius| + |outset|</code>.
+		1. Let |ratio| be <code>|radius| / |outset|</code>.
+		1. Return <code>|radius| + |outset| * (1 - (1 - |ratio|)<sup>3</sup> * (1 - |coverage|<sup>3</sup>))</code>.
+
+		Note: this algorithm is designed to reduce the effect of the |outset| (or spread) on the shape of the corner.
+		The |coverage| factor makes this reduction more pronounced for rectangular shapes (where the [=border-radius=] is close to 0),
+		and less pronounced for elliptical shapes (where the [=border-radius=] is close to 50%).
+</div>
 
 
 <h3 id="corner-clipping">
@@ -2969,19 +2986,8 @@ Shadow Shape, Spread, and Knockout</h4>
 	the corner radii of the shadow are also increased (decreased, for inner shadows)
 	from the border-box (padding-box) radii by adding (subtracting)
 	the [=spread distance=] (and flooring at zero).
-	However, in order to create a sharper corner when the border radius is small
-	(and thus ensure continuity between round and sharp corners),
-	when the [=border radius=] is less than the [=spread distance=]
-	(or in the case of an inner shadow,
-	less than the absolute value of a negative [=spread distance=]),
-	the [=spread distance=]
-	is first 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 [=spread distance=],
-	in calculating the corner radii of the spread shadow shape.
-	For example, if the border radius is 10px and the [=spread distance=] 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
-	rather than 30px.
-	This adjustment is applied independently to the radii in each dimension.
+	For outer shadows, the [=border-radius=] is then [=outset-adjusted border radius|adjusted=], independently in each dimension,
+	to preserve the sharpness of rounded corners.
 
 	The 'border-image' does not affect the shape of the box-shadow.