> definition for details.
+
+
+Rendering 'corner-shape'
+'corner-shape' works alongside 'border-radius', and does not have any visual effect with a 'border-radius' of 0.
+It acts as an alteration on top of the default round 'border-radius', and thus can be used as progressive enhancement.
+
+Like 'border-radius', 'corner-shape' clips elements according to the [=overflow=] rules, and applies to the rendering of the border.
+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: 'border-radius' already handles *adjacent* corners overlapping by shrinking the radiuses proportionally.
+A negative ''superellipse()'' parameter allows for *opposite* corners to sometimes overlap, and needs additional restrictions defined.
+
+Issue #11610: check if we need additional rendering restrictions.
+
+
+'corner-shape' values
+
+
+ <> = ''round'' | ''scoop'' | ''bevel'' | ''notch'' | ''straight'' | ''squircle'' | superellipse(<>)
+
+
+
+ - round
+
-
+ Border radii define a convex elliptical curve at the corner. Equivalent to superellipse(2).
+
+ Note: this is the initial value of 'corner-shape' properties, as elements with 'border-radius' would be rounded.
+
+
- scoop
+
- Border radii define a concave elliptical curve at the corner. Equivalent to superellipse(0.5).
+
- bevel
+
- Border radii define a diagonal slice at the corner. Equivalent to superellipse(1).
+
- notch
+
- Border radii define a concave 90deg angle at the corner. Equivalent to superellipse(0).
+
- straight
+
- 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 superellipse(infinity).
+
- squircle
+
- Border radii define a convex curve between an ellipse and an convex angle, equivalent to superellipse(4).
+
+
+ Issue #11607: resolve on ''straight'' vs none.
+
+ The superellipse( <> | infinity ) function describes the curvature of the corner.
+ It accepts a superellipse exponent, which defines the curvature of the corner, or the exponent of the formula.
+ The [=superellipse exponent=] accepts values between 0 (a straight concave angle) and infinity (a straight convex angle),
+ with the values in between representing the curvatures in between.
+
+ The ''superellipse()'' formula can be described in cartesian coordinates, as follows,
+ where a is the horizontal ''border-radius''
+ b is the vertical ''border-radius'', and k is the [=superellipse exponent=]:
+
+
+ |x/a|^k + |y/b|^k = 1
+
+
+
+Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties
Name: corner-shape
- Value: [ round | angle ]{1,4}
+ Value: <>{1,2} / [ <>{1,2} ]?
Initial: round
- Applies to: all elements, except table element when 'border-collapse' is ''collapse''
+ Applies to: all elements where 'border-radius' can apply
Inherited: no
- Animation type: discrete
+ Animation type: see individual properties
- By default, non-zero border-radii define
- a quarter-ellipse that rounds the affected corners.
- However in some cases, other corner shapes are desired.
- The 'corner-shape' property specifies a reinterpretation of the radii
- to define other corner shapes.
-
-
- - ''round''
-
- Border radii define a convex elliptical curve at the corner.
-
- ''angle''
-
- Border radii define a diagonal slice at the corner.
-
+ Applies the shape to all corners, following the same rules as ''border-radius''.
+
+
+ Name: corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape, corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape
+ Value: <>
+ Initial: round
+ Applies to: all elements where 'border-radius' can apply
+ Inherited: no
+ Logical property group: corner-shape
+ Computed value: the corresponding ''superellipse()'' value
+ Animation Type: see [=superellipse interpolation=]
+
+
+ The [=flow-relative=] properties
+ 'corner-start-start-shape',
+ 'corner-start-end-shape',
+ 'corner-end-start-shape',
+ and 'corner-end-end-shape'
+ correspond to the [=physical=] properties
+ 'corner-top-left-shape',
+ 'corner-bottom-left-shape',
+ 'corner-top-right-shape',
+ and 'corner-bottom-right-shape'.
+ The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation',
+ with the first start/end giving the block axis side,
+ and the second the inline-axis side
+ (i.e. patterned as 'corner-block-inline-shape').
+
+
+ Name: corner-top-shape, corner-right-shape, corner-bottom-shape, corner-left-shape,
+ corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape, corner-inline-end-shape
+ Value: <> [ / <> ]
+ Initial: round
+ Applies to: all elements where 'border-radius' can apply
+ Inherited: no
+ Computed value: see individual properties
+ Animation type: see individual properties
+
+
+ The 'corner-*-shape' shorthands set the two 'corner-*-*-shape'
+ longhand properties of the related side. If values are given before
+ and after the slash, then the values before the slash set the
+ horizontal radius and the values after the slash set the vertical radius.
+ If there is no slash, then the values set both radii equally.
+ The two values for the radii are given in the order
+ top-left, top-right for 'corner-top-shape',
+ top-right, bottom-right for 'corner-right-shape',
+ bottom-left, bottom-right for 'corner-bottom-shape',
+ top-left, bottom-left for 'corner-left-shape',
+ start-start, start-end for 'corner-block-start-shape',
+ end-start, end-end for 'corner-block-end-shape'
+ start-start, end-start for 'corner-inline-start-shape',
+ and start-end, end-end for 'corner-inline-end-shape'.
+ If the second value is omitted it is copied from the first.
+
+
+
+Interpolating corner shapes
+
+Since a <> can always be expressed by a ''superellipse()'' with an [=superellipse exponent=] variable, interpolating between two
+<>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 superellipse interpolation formula describes how a [=superellipse exponent=] is converted to a value between 0 and 1, and vice versa:
+
+
+To interpolate a <> |exponent| to an interpolation value between 0 and 1:
+ 1. If |exponent| is 0, return 0.
+ 1. If |exponent| is ∞, return 1.
+ 1. Return 1/(2^(1/|exponent|)).
+
+To convert a <> |interpolationValue| back to a [=superellipse exponent=]:
+ 1. If |interpolationValue| is 0, return 0.
+ 1. If |interpolationValue| is 1, return ∞.
+ 1. Return ln(0.5)/ln(|interpolationValue|).
+
+
+Issue #11608: resolve on this or another interpolation formula.
+
+
+
+
For example, the following declarations create a right-pointing next button.
@@ -398,33 +537,6 @@ Corner Shaping: the 'corner-shape' property
How to allow custom corners? Perhaps a ''path()'' function? Or a ''cubic-bezier()''?
Something else?
-
-Corner Shape and Size: the 'corners' shorthand
-
-
- Name: corners
- Value: <<'corner-shape'>> || <<'border-radius'>>
-
-
- The 'corners' shorthand sets 'corner-shape' and 'border-radius' in the same declaration.
- If either is omitted, it is reset to its initial value.
-
-
- For example, the following declaration creates a diamond shape.
-
corners: angle 50%;
- In UAs that don't support 'corner-shape', the declaration is ignored
- (falls back to a rectangle).
-
-
-
- In this example, the first declaration creates tabs with vertical sides and rounded corners using 'border-radius',
- while the second example makes them trapezoid-shaped in UAs that support 'corners'.
-
- border-radius: 0.25em 0.25em 0 0;
- corners: angle 0.25em 0.25em 0 0 / 50% 50% 0 0;
-
-
-
Partial borders