Skip to content

[css-backgrounds-4] Added border-*-radius shorthands #7705

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

Merged
merged 5 commits into from
Feb 17, 2023
Merged

[css-backgrounds-4] Added border-*-radius shorthands #7705

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e30b61
[css-backgrounds-4] Added `border-*-radius` shorthands
SebastianZ Sep 6, 2022
7215ec8
[css-backgrounds-4] Replaced "flow-relative" by "physical" and mentio…
SebastianZ Sep 7, 2022
0b8fd97
[css-backgrounds-4] Let logical `border-*-radius` shorthands expand t…
SebastianZ Oct 3, 2022
3be3250
[css-backgrounds-4] Added issue for `border-*-radius` value order
SebastianZ Oct 3, 2022
b8ad9b2
[css-backgrounds-4] Merged physical and logical border-*-radius short…
SebastianZ Oct 9, 2022
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
48 changes: 46 additions & 2 deletions css-backgrounds-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,8 +242,52 @@ Painting Area: the 'background-clip' property</h3>
<h2 id="corners">
Corners</h2>

<h3 id=corner-sizing>
Corner Sizing: the 'border-radius' property</h3>
<h3 id="corner-sizing">
Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties</h3>

<h4 id="corner-sizing-side-shorthands">
Sizing The Corners Of One Side:
The 'border-top-radius', 'border-right-radius',
'border-bottom-radius', 'border-left-radius',
'border-block-start-radius', 'border-block-end-radius',
'border-inline-start-radius', 'border-inline-end-radius' shorthands</h4>

<pre class=propdef>
Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius,
border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
Value: <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{1,2} ]?
Initial: 0
Applies to: all elements (but see prose)
Inherited: no
Percentages: Refer to corresponding dimension of the <a>border box</a>.
Computed value: see individual properties
Animatable: see individual properties
</pre>

<p>The 'border-*-radius' shorthands set the two 'border-*-*-radius'
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 'border-top-radius',
top-right, bottom-right for 'border-right-radius',
bottom-left, bottom-right for 'border-bottom-radius',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about this, would it be better to follow the same order as in border-radius?

So border-radius: 1px 2px 3px 4px would be equivalent to

border-top-radius: 1px 2px;
border-bottom-radius: 3px 4px;

instead of

border-top-radius: 1px 2px;
border-bottom-radius: 4px 3px;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it makes more sense to keep them from top to bottom and left to right, especially in regard of their logical counterparts. E.g. in horizontal writing modes you probably would not want the values switch their order depending on whether they are left-to-right or right-to-left.

Though I created an issue in the spec. so we can discuss this separately.

top-left, bottom-left for 'border-left-radius',
start-start, start-end for 'border-block-start-radius',
end-start, end-end for 'border-block-end-radius'
start-start, end-start for 'border-inline-start-radius',
and start-end, end-end for 'border-inline-end-radius'.
If the second value is omitted it is copied from the first.

<p class="issue">
Should the physical values all be defined as left to right and top to bottom
and the logical ones as start to end
or should they follow the clockwise order of ''border-radius''?

<h4 id="corner-sizing-shorthand">
Sizing All Corners At Once:
The 'border-radius' shorthand</h4>

<pre class="propdef">
Name: border-radius
Expand Down