Skip to content

Commit

Permalink
[css-borders-4][editorial] Moved logical border properties from CSS L…
Browse files Browse the repository at this point in the history 
…ogical 1 to CSS Borders 4 (#9592)
  • Loading branch information
@SebastianZ
SebastianZ authored Dec 16, 2023
1 parent 7fad913 commit 9058345
Showing 1 changed file with 207 additions and 24 deletions.
231 changes: 207 additions & 24 deletions css-borders-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,31 @@ Introduction</h2>
This module is currently maintained as a diff against
the parts related to borders and box decorations of
CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
We will fold in the text once it's all formatted up and in CR again,
We will fold in the text once it’s all formatted up and in CR again,
as this will reduce the effort of keeping them in sync
(source diffs will be accurate in reflecting the differences).

<h2 id="borders">
Borders</h2>

<p class="issue">
Should logical border properties be moved from
<a href="https://www.w3.org/TR/css-logical-1/#border-properties">CSS Logical</a>
to here?
<p>The border can either be a predefined style (solid line, double
line, dotted line, pseudo-3D border, etc.) or it can be an image. In
the former case, various properties define the style ('border-style'),
color ('border-color'), and thickness ('border-width') of the border.

<h3 id="the-border-color">
<h3 id="border-color" oldids="the-border-color">
Line Colors: the 'border-color' properties</h3>

<pre class=propdef>
Name: border-top-color, border-right-color, border-bottom-color, border-left-color
Value: <<color>> | <<image-1D>>
Initial: currentcolor
Applies to: all elements
Inherited: no
Logical property group: border-color
Percentages: n/a
Computed Value: the computed color and/or a one-dimensional image function
Animation type: see prose
<pre class="propdef">
Name: border-top-color, border-right-color, border-bottom-color, border-left-color, border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
Value: <<color>> | <<image-1D>>
Initial: currentcolor
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
Inherited: no
Logical property group: border-color
Percentages: N/A
Computed Value: the computed color and/or a one-dimensional image function
Animation type: see prose
</pre>

<pre class="propdef shorthand">
Expand All @@ -70,13 +70,6 @@ Line Colors: the 'border-color' properties</h3>
The border width at each point
defines the |total width| of the stripes at that point.

'border-color' is a shorthand for the four 'border-*-color' properties.
The four values set the top, right, bottom and left border, respectively.
A missing left is the same as right,
a missing bottom is the same as top,
and a missing right is also the same as top.
This is resolved individually for each list item.

<div class="example">
Using multiple colors for each side:

Expand All @@ -96,11 +89,200 @@ Line Colors: the 'border-color' properties</h3>
<img src="images/multicolor-border-dotted.png" alt="">
</div>

'border-color' is a shorthand for the four 'border-*-color' properties.
The four values set the top, right, bottom and left border, respectively.
A missing left is the same as right,
a missing bottom is the same as top,
and a missing right is also the same as top.
This is resolved individually for each list item.

The [=flow-relative=] properties
'border-block-start-color',
'border-block-end-color',
'border-inline-start-color',
and 'border-inline-end-color'
correspond to the [=physical=] properties
'border-top-color',
'border-bottom-color',
'border-left-color',
and 'border-right-color'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">
Name: border-block-color, border-inline-color
Value: <<'border-top-color'>>{1,2}
</pre>

These two <a>shorthand properties</a> set the
'border-block-start-color' &amp; 'border-block-end-color'
and
'border-inline-start-color' &amp; 'border-inline-end-color',
respectively.
The first value represents the <a>start</a> side color,
and the second value represents the <a>end</a> side color.
If only one value is given,
it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-style" oldids="the-border-style">
Line Patterns: the 'border-style' properties</h3>

<pre class="propdef">
Name: border-top-style, border-right-style, border-bottom-style, border-left-style, border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
Value: <<line-style>>
Initial: none
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
Inherited: no
Logical property group: border-style
Percentages: N/A
Computed value: specified keyword
Animation type: discrete
</pre>

The [=flow-relative=] properties
'border-block-start-style',
'border-block-end-style',
'border-inline-start-style',
and 'border-inline-end-style'
correspond to the [=physical=] properties
'border-top-style',
'border-bottom-style',
'border-left-style',
and 'border-right-style'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">
Name: border-block-style, border-inline-style
Value: <<'border-top-style'>>{1,2}
</pre>

These two <a>shorthand properties</a> set the
'border-block-start-style' &amp; 'border-block-end-style'
and
'border-inline-start-style' &amp; 'border-inline-end-style',
respectively.
The first value represents the <a>start</a> side style,
and the second value represents the <a>end</a> side style.
If only one value is given,
it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-width" oldids="the-border-width">
Line Thickness: the 'border-width' properties</h3>

<pre class="propdef">
Name: border-top-width, border-right-width, border-bottom-width, border-left-width, border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
Value: <<line-width>>
Initial: medium
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
Inherited: no
Logical property group: border-width
Percentages: N/A
Computed value: absolute length, [=snapped as a border width=]; zero if the border style is ''border-style/none'' or ''border-style/hidden''
Animation Type: by computed value
</pre>

The [=flow-relative=] properties
'border-block-start-width',
'border-block-end-width',
'border-inline-start-width',
and 'border-inline-end-width'
correspond to the [=physical=] properties
'border-top-width',
'border-bottom-width',
'border-left-width',
and 'border-right-width'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">
Name: border-block-width, border-inline-width
Value: <<'border-top-width'>>{1,2}
</pre>

These two <a>shorthand properties</a> set the
'border-block-start-width' &amp; 'border-block-end-width'
and
'border-inline-start-width' &amp; 'border-inline-end-width',
respectively.
The first value represents the <a>start</a> side width,
and the second value represents the <a>end</a> side width.
If only one value is given,
it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-shorthands" oldids="the-border-shorthands">
Border Shorthand Properties</h3>

<pre class="propdef shorthand">
Name: border-top, border-right, border-bottom, border-left, border-block-start, border-block-end, border-inline-start, border-inline-end
Value: <<line-width>> || <<line-style>> || <<color>>
Initial: See individual properties
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
Inherited: no
Percentages: N/A
Computed value: see individual properties
Animation Type: see individual properties
</pre>

The [=flow-relative=] properties
'border-block-start',
'border-block-end',
'border-inline-start',
and 'border-inline-end'
correspond to the [=physical=] properties
'border-top',
'border-bottom',
'border-left',
and 'border-right'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">
Name: border-block, border-inline
Value: <<'border-block-start'>>
</pre>

These two <a>shorthand properties</a> set the
'border-block-start' &amp; 'border-block-end'
or
'border-inline-start' &amp; 'border-inline-end',
respectively,
both to the same style.

<!-- intentionally cannot set two sides independently;
see discussion in https://github.com/w3c/csswg-drafts/issues/3519 -->

<h2 id="corners">
Corners</h2>

<h3 id="border-radius" oldids="the-border-radius">
Corner Sizing: the 'border-*-*-radius' properties</h3>

<pre class=propdef>
Name: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
Value: <<length-percentage [0,&infin;]>>{1,2}
Initial: 0
Applies to: all elements (but see prose)
Inherited: no
Logical property group: border-radius
Percentages: Refer to corresponding dimension of the <a>border box</a>.
Computed value: pair of computed <<length-percentage>> values
Animation Type: by computed value
</pre>

The [=flow-relative=] properties
'border-start-start-radius',
'border-start-end-radius',
'border-end-start-radius',
and 'border-end-end-radius'
correspond to the [=physical=] properties
'border-top-left-radius',
'border-bottom-left-radius',
'border-top-right-radius',
and 'border-bottom-right-radius'.
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 'border-<var>block</var>-<var>inline</var>-radius').

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

<h4 id="corner-sizing-side-shorthands">
Sizing The Corners Of One Side:
Expand Down Expand Up @@ -803,6 +985,7 @@ Additions since [[CSS3BG]]</h3>
* added 'corner-shape' and related 'corners' shorthand
* added <a href="#partial-borders">partial borders</a> via 'border-limit' and 'border-*-clip' properties
* turned 'box-shadow' into a shorthand and added longhands
* moved logical border properties from [[CSS-LOGICAL-1]] to this spec.

<h2 id="acknowledgments">
Acknowledgments</h2>
Expand Down

0 comments on commit 9058345

Please sign in to comment.