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. + +
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%).
+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.