[css-background-3] Adjust border-radius outset correction

css-backgrounds-3/Overview.bs

@@ -2453,13 +2453,30 @@ Corner Shaping</h3>
 
 	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-sadow' 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>1 - |radius| / |outset|</code>.
+		1. Return <code>|radius| + |outset| * (1 - r<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">
@@ -3544,19 +3561,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 preseve the sharpness of rounded corners.
 
 	The 'border-image' does not affect the shape of the box-shadow.
 

css-shapes-1/Overview.bs

@@ -1371,10 +1371,7 @@ Shapes from Box Values</h2>
 	or margin is negative or zero, 
 	then the margin box corner radius is
 	<code>max(border-radius + margin, 0)</code>.
-	If the ratio of <code>border-radius/margin</code> is less than 1,
-	and margin is positive, 
-	then the margin box corner radius is
-	<code>border-radius + margin * (1 + (ratio-1)^3)</code>.
+	The margin box's corners are [=outset-adjusted border radius|outset-adjusted=] given the element's [=border box=], 'border-radius', and the margin.
 
 	The <dfn value for="<shape-box>, shape-outside">border-box</dfn> value defines the shape
 	enclosed by the outside border edge.