Skip to content

[css-borders-4] Accept 1-2 / 1-4 whitespace separated values in corner-shape shorthands #11655

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

[css-borders-4] Accept 1-2 / 1-4 whitespace separated values in corner-shape shorthands #11655

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d89871
[css-borders-4] Accept 2 values in corner-<side>-shape
cdoublev Feb 5, 2025
a15633d
[css-borders-4] Accept 1-4 values with no slash in corner-shape
cdoublev Feb 5, 2025
246f020
[css-borders-4] Fix prose
cdoublev Feb 5, 2025
6264c13
[css-borders-4] Improve sectioning of corner-*-shape properties
cdoublev Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions css-borders-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,19 +405,8 @@ Issue <a href="https://github.com/w3c/csswg-drafts/issues/11610">#11610</a>: che
|x/a|^k + |y/b|^k = 1
</pre>

<h4 id=corner-shape-shorthand>
Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties</h4>

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

Applies the shape to all corners, following the same rules as ''border-radius''.
<h4 id=corner-shape-longhands>
Corner Shaping: the 'corner-*-shape' properties</h4>

<pre class=propdef>
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
Expand Down Expand Up @@ -445,10 +434,13 @@ Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties</h4>
and the second the inline-axis side
(i.e. patterned as 'corner-<var>block</var>-<var>inline</var>-shape').

<h4 id=corner-shape-shorthands>
Corner Shaping: the 'corner-shape' and 'corner-*-shape' shorthand properties</h4>

<pre class=propdef>
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: <<corner-shape-value>>
Value: <<corner-shape-value>>{1,2}
Initial: round
Applies to: all elements where 'border-radius' can apply
Inherited: no
Expand All @@ -457,10 +449,8 @@ Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties</h4>
</pre>

<p>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.
longhand properties of the related side.
If a single value is specified, it sets both longhands 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',
Expand All @@ -472,6 +462,17 @@ Corner Shaping: the 'corner-shape' and 'corner-*-shape' properties</h4>
and start-end, end-end for 'corner-inline-end-shape'.
If the second value is omitted it is copied from the first.

<pre class="propdef">
Name: corner-shape
Value: <<corner-shape-value>>{1,4}
Initial: round
Applies to: all elements where 'border-radius' can apply
Inherited: no
Animation type: see individual properties
</pre>

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


<h4 id=corner-shape-interpolation>
Interpolating corner shapes</h4>
Expand Down