From a3e9218702d0d8c986f3cf1c2853f35299954453 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 12:13:55 +0000 Subject: [PATCH 01/14] [css-borders-4] Specify `corner-shape` based on superellipse This specifies the `corner-shape` group, including: - general description and interaction with border-radius - all the individual corners, side shorthands, and overall shorthand - multiple keywords, and how they translate to a `superellipse()` - The superellipse formula, and how it is rendered - How the exponent of the superellipse interpolates Open issues (will open separately): - Add a few examples - Resolve on "straight" vs "none" for the convex angle. - Resolve on the exact interpolation formula - Define restrictions for border rendering Closes #10993 Based on resolution https://github.com/w3c/csswg-drafts/issues/10993#issuecomment-2622578937 --- css-borders-4/Overview.bs | 199 ++++++++++++++++++++++++++++++-------- 1 file changed, 157 insertions(+), 42 deletions(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index 2b0051e5569..bd42c4ffd9c 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -336,29 +336,171 @@ The 'border-radius' shorthand See [[CSS3BG]].

-Corner Shaping: the 'corner-shape' property

+Corner Shaping + +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 group specifies a reinterpretation of the radii to define other corner shapes. + +The different shapes applicable to 'corner-shape' can be expressed as different parameters to a superellipse. +A superellipse is a closed curve resembling an ellipse, and based on its `k` parameter can express all the shapes between a square, an ellipse, and a notch. + +To allow full expression as well as interpolation, the 'corner-shape' properties can provide its own superellipse parameter using the 'superellipse()' function, +or use one of the supplied keywords which represent commonly used parameters. See the <> 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: describe the rendering requirements in more detail. + +

+'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). +
''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 angle at the corner. Equivalent to superellipse(0). +
''straight'' +
Border radii define a convex 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: resolve on ''straight'' vs none. + + The superellipse() function describes the curvature of the corner. + It accept 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' properties

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

+Shaping The Corners Of One Side: +The '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' shorthands

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

+Shaping all the corners at once

 		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. + Applies the shape to all corners, following the same rules as ''border-radius''. -
-
''round'' -
Border radii define a convex elliptical curve at the corner. -
''angle'' -
Border radii define a diagonal slice at the corner. -
+

+Interpolating corner shapes

+ +Since a <> can always be expressed 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: resolve on this or another interpolation formula. + +
+
+
For example, the following declarations create a right-pointing next button. @@ -398,33 +540,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

From 137925d1fe77d8320bc0e8277df0f9bb76f685c1 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 15:42:56 +0000 Subject: [PATCH 02/14] Add issue numbers --- css-borders-4/Overview.bs | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index bd42c4ffd9c..5150f7bde2e 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -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 #11610: describe the rendering requirements in more detail.

'corner-shape' values

@@ -368,22 +368,26 @@ Issue: describe the rendering requirements in more detail.
''round'' -
Border radii define a convex elliptical curve at the corner. Equivalent to superellipse(2). +
+ 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 angle at the corner. Equivalent to superellipse(0). +
Border radii define a concave 90deg angle at the corner. Equivalent to superellipse(0).
''straight'' -
Border radii define a convex angle at the corner. +
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: resolve on ''straight'' vs none. + Issue #11607: resolve on ''straight'' vs none. The superellipse() function describes the curvature of the corner. It accept a <> superellipse exponent, which defines the curvature of the corner, or the exponent of the formula. @@ -479,7 +483,7 @@ Shaping all the corners at once

Interpolating corner shapes

-Since a <> can always be expressed a ''superellipse()'' with an [=superellipse exponent=] variable, interpolating between two +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: @@ -496,7 +500,7 @@ To convert a <> |interpolationValue| back to a [=superellipse expo 1. Return ln(0.5)/ln(|interpolationValue|).
-Issue: resolve on this or another interpolation formula. +Issue #11608: resolve on this or another interpolation formula. 
 

From 0be96d1d499327fc53ded411a81ff37d4f72f9fa Mon Sep 17 00:00:00 2001
From: Noam Rosenthal 
Date: Thu, 30 Jan 2025 16:16:19 +0000
Subject: [PATCH 03/14] Add link to existing restriction

---
 css-borders-4/Overview.bs | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index 5150f7bde2e..9b54babe348 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -357,7 +357,10 @@ 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 #11610: describe the rendering requirements in more detail.
+Note that `border-radius` already has a corner overlap restriction,
+and it's unclear whether 'corner-shape' would require additional restrictions.
+
+Issue #11610: check if we need additional rendering restrictions.
 
 

 'corner-shape' values


From 9a2403a1a1678544157b8f46a4d7ac37321d09ca Mon Sep 17 00:00:00 2001
From: Noam Rosenthal 
Date: Thu, 30 Jan 2025 17:48:53 +0000
Subject: [PATCH 04/14] Update css-borders-4/Overview.bs

Co-authored-by: Tab Atkins Jr. 
---
 css-borders-4/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index 9b54babe348..cb3e935167e 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -392,7 +392,7 @@ Issue #11610: che
 
 	Issue #11607: resolve on ''straight'' vs none.
 
-	The superellipse() function describes the curvature of the corner.
+	The superellipse( <> | infinity ) function describes the curvature of the corner.
 	It accept 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.

From ff8cbd41f7bb3a3ca2b786df00c860c8286afc0d Mon Sep 17 00:00:00 2001
From: Noam Rosenthal 
Date: Thu, 30 Jan 2025 17:48:59 +0000
Subject: [PATCH 05/14] Update css-borders-4/Overview.bs

Co-authored-by: Tab Atkins Jr. 
---
 css-borders-4/Overview.bs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index cb3e935167e..857f1b27776 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -357,8 +357,8 @@ 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.
 
-Note that `border-radius` already has a corner overlap restriction,
-and it's unclear whether 'corner-shape' would require additional restrictions.
+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.
 

From 4246347d6fcb2113d47ff95b78459a7c61574983 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal 
Date: Thu, 30 Jan 2025 17:49:06 +0000
Subject: [PATCH 06/14] Update css-borders-4/Overview.bs

Co-authored-by: Tab Atkins Jr. 
---
 css-borders-4/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index 857f1b27776..ccb8e6005aa 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -370,7 +370,7 @@ Issue #11610: che
-
''round'' +
round
Border radii define a convex elliptical curve at the corner. Equivalent to superellipse(2). From ff932193c919c54f06b08ab677c04ee2d97b5640 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 17:49:12 +0000 Subject: [PATCH 07/14] Update css-borders-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-borders-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index ccb8e6005aa..549df6300c6 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -376,7 +376,7 @@ Issue #11610: che Note: this is the initial value of 'corner-shape' properties, as elements with 'border-radius' would be rounded. -
''scoop'' +
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). From 93397894879a58905b6498c4a3be2f2757514dd7 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 17:49:18 +0000 Subject: [PATCH 08/14] Update css-borders-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-borders-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index 549df6300c6..a15f8283a58 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -369,7 +369,7 @@ Issue #11610: che <> = ''round'' | ''scoop'' | ''bevel'' | ''notch'' | ''straight'' | ''squircle'' | superellipse(<>) -
+
round
Border radii define a convex elliptical curve at the corner. Equivalent to superellipse(2). From 580ad8c9b6085f077a19b8f4eff7401a1b11803e Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 17:49:24 +0000 Subject: [PATCH 09/14] Update css-borders-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-borders-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index a15f8283a58..b73b410aba5 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -378,7 +378,7 @@ Issue #11610: che
scoop
Border radii define a concave elliptical curve at the corner. Equivalent to superellipse(0.5). -
''bevel'' +
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). From 124849266cb36cccb3bc138ed4058ec52b3bbe49 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 17:49:31 +0000 Subject: [PATCH 10/14] Update css-borders-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-borders-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index b73b410aba5..d6781057c3a 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -382,7 +382,7 @@ Issue #11610: che
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'' +
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). From e9ff305ba7c077996780f388be79bb7c9e20e4d9 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 17:49:37 +0000 Subject: [PATCH 11/14] Update css-borders-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-borders-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index d6781057c3a..8e024ccee63 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -386,7 +386,7 @@ Issue #11610: che
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'' +
squircle
Border radii define a convex curve between an ellipse and an convex angle, equivalent to superellipse(4).
From 928c2728843e03ccc2f787a1b278c5cb079034fb Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 17:49:44 +0000 Subject: [PATCH 12/14] Update css-borders-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-borders-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index 8e024ccee63..2d7ccc6c284 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -393,7 +393,7 @@ Issue #11610: che Issue #11607: resolve on ''straight'' vs none. The superellipse( <> | infinity ) function describes the curvature of the corner. - It accept a <> superellipse exponent, which defines the curvature of the corner, or the exponent of the formula. + 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. From 2da821d804bbd42a5ca258691decdc271433cefc Mon Sep 17 00:00:00 2001 From: "Tab Atkins Jr." Date: Thu, 30 Jan 2025 13:09:49 -0800 Subject: [PATCH 13/14] Update css-borders-4/Overview.bs --- css-borders-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index 2d7ccc6c284..cd1ac465d8e 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -380,7 +380,7 @@ Issue #11610: che
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'' +
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. From 5ac86df01201353e33fe427415c4be1cb622fcd6 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 30 Jan 2025 21:17:02 +0000 Subject: [PATCH 14/14] Reorder props --- css-borders-4/Overview.bs | 34 ++++++++++++---------------------- 1 file changed, 12 insertions(+), 22 deletions(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index cd1ac465d8e..e273160a2ad 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -405,9 +405,19 @@ Issue #11610: che |x/a|^k + |y/b|^k = 1 +

+Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties

+ + 
+		Name: corner-shape
+		Value: <>{1,2} / [ <>{1,2} ]?
+		Initial: round
+		Applies to: all elements where 'border-radius' can apply
+		Inherited: no
+		Animation type: see individual properties
+
-

-Corner Shaping: the 'corner-*-*-shape' properties

+ 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
@@ -435,13 +445,6 @@ Corner Shaping: the 'corner-*-*-shape' properties
 	and the second the inline-axis side
 	(i.e. patterned as 'corner-block-inline-shape').
 
-

-Shaping The Corners Of One Side:
-The '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' shorthands

-
 	
 		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
@@ -469,19 +472,6 @@ The 'corner-top-shape', 'corner-right-shape',
 	and start-end, end-end for 'corner-inline-end-shape'.
 	If the second value is omitted it is copied from the first.
 
-

-Shaping all the corners at once

-
-	
-		Name: corner-shape
-		Value: <>{1,2} / [ <>{1,2} ]?
-		Initial: round
-		Applies to: all elements where 'border-radius' can apply
-		Inherited: no
-		Animation type: see individual properties
-	

-
-	Applies the shape to all corners, following the same rules as ''border-radius''.
 
 

 Interpolating corner shapes