Skip to content
Merged
Prev Previous commit
Next Next commit
Add issue numbers
  • Loading branch information
noamr committed Jan 30, 2025
commit 137925d1fe77d8320bc0e8277df0f9bb76f685c1
18 changes: 11 additions & 7 deletions css-borders-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@ Like 'border-radius', 'corner-shape' clips elements according to the [=overflow=
Since stroking a superellipse accurately may be computationally intensive, user agents may approximate the path using bezier curves,
as well as account for sharp edges and overlaps.

Issue: describe the rendering requirements in more detail.
Issue <a href="https://github.com/w3c/csswg-drafts/issues/11610">#11610</a>: describe the rendering requirements in more detail.

<h4 id=corner-shape-value>
'corner-shape' values</h4>
Expand All @@ -368,22 +368,26 @@ Issue: describe the rendering requirements in more detail.

<dl dfn-type="value" dfn-for="corner-shape-value">
<dt><dfn>''round''</dfn>
<dd>Border radii define a convex elliptical curve at the corner. Equivalent to <css>superellipse(2)</css>.
<dd>
Border radii define a convex elliptical curve at the corner. Equivalent to <css>superellipse(2)</css>.

Note: this is the initial value of 'corner-shape' properties, as elements with 'border-radius' would be rounded.

<dt><dfn>''scoop''</dfn>
<dd>Border radii define a concave elliptical curve at the corner. Equivalent to <css>superellipse(0.5)</css>.
<dt><dfn>''bevel''</dfn>
<dd>Border radii define a diagonal slice at the corner. Equivalent to <css>superellipse(1)</css>.
<dt><dfn>''notch''</dfn>
<dd>Border radii define a concave angle at the corner. Equivalent to <css>superellipse(0)</css>.
<dd>Border radii define a concave 90deg angle at the corner. Equivalent to <css>superellipse(0)</css>.
<dt><dfn>''straight''</dfn>
<dd>Border radii define a convex angle at the corner.
<dd>Border radii define a convex 90deg angle at the corner.
This would have the same visual effect as a 'border-radius' of 0. This is different from having a 'border-radius' of 0 when animating.
Equivalent to <css>superellipse(infinity)</css>.
<dt><dfn>''squircle''</dfn>
<dd>Border radii define a convex curve between an ellipse and an convex angle, equivalent to <css>superellipse(4)</css>.
</dl>

Issue: resolve on ''straight'' vs <css>none</css>.
Issue <a href="https://github.com/w3c/csswg-drafts/issues/11607">#11607</a>: resolve on ''straight'' vs <css>none</css>.

The <dfn>superellipse()</dfn> function describes the curvature of the corner.
It accept a <<number>> <dfn>superellipse exponent</dfn>, which defines the curvature of the corner, or the exponent of the formula.
Expand Down Expand Up @@ -479,7 +483,7 @@ Shaping all the corners at once</h4>
<h4 id=corner-shape-interpolation>
Interpolating corner shapes</h4>

Since a <<corner-shape-value>> can always be expressed a ''superellipse()'' with an [=superellipse exponent=] variable, interpolating between two
Since a <<corner-shape-value>> can always be expressed by a ''superellipse()'' with an [=superellipse exponent=] variable, interpolating between two
<<corner-shape-value>>s is done by interpolating the [=superellipse exponent=] itself.
Since it's an exponent, interpolating it linearly would result in an effect where concave corners interpolate at a much higher velocity than convex corners.
To balance that, the <dfn>superellipse interpolation</dfn> formula describes how a [=superellipse exponent=] is converted to a value between 0 and 1, and vice versa:
Expand All @@ -496,7 +500,7 @@ To convert a <<number [0,1]>> |interpolationValue| back to a [=superellipse expo
1. Return <code>ln(0.5)/ln(|interpolationValue|)</code>.
</div>

Issue: resolve on this or another interpolation formula.
<a href="https://github.com/w3c/csswg-drafts/issues/11608">Issue #11608</a>: resolve on this or another interpolation formula.

<pre>

Expand Down