diff --git a/css-backgrounds-3/Overview.bs b/css-backgrounds-3/Overview.bs index d726ab96ae7..d4630f21e87 100644 --- a/css-backgrounds-3/Overview.bs +++ b/css-backgrounds-3/Overview.bs @@ -2453,13 +2453,30 @@ Corner Shaping 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 - (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 + (r-1)3, - where r 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. + +
+ + 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 outset-adjusted border radius given the 2-dimensional [=size=]s |edge|, |radius|, and |outset|: + 1. Let |coverage| be 2 * min(|radius|'s [=width=] / |edge|'s [=width=], |radius|'s [=height=] / |edge|'s [=height=]). + 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 adjusted radius dimension given numbers |coverage|, |radius|, and |outset|: + 1. If |radius| is greater than |spread|, or if |coverage| is greater than 1, then return |radius| + |outset|. + 1. Let |ratio| be |radius| / |outset|. + 1. Return |radius| + |outset| * (1 - (1 - |ratio|)3 * (1 - |coverage|3)). + + 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%). +

@@ -3544,19 +3561,8 @@ Shadow Shape, Spread, and Knockout

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 + (r-1)3, - where r 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 (r = .5), - the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)3) = 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. diff --git a/css-shapes-1/Overview.bs b/css-shapes-1/Overview.bs index fd06a7be321..bf0cb0f3d8c 100644 --- a/css-shapes-1/Overview.bs +++ b/css-shapes-1/Overview.bs @@ -1371,10 +1371,7 @@ Shapes from Box Values or margin is negative or zero, then the margin box corner radius is max(border-radius + margin, 0). - If the ratio of border-radius/margin is less than 1, - and margin is positive, - then the margin box corner radius is - border-radius + margin * (1 + (ratio-1)^3). + The margin box's corners are [=outset-adjusted border radius|outset-adjusted=] given the element's [=border box=], 'border-radius', and the margin. The border-box value defines the shape enclosed by the outside border edge.