Skip to content

Commit f3d0da1

Browse files
noamrtabatkins
andauthored
[css-borders-4] Specify the corner-* shorthands (w3c#12660)
* [css-borders-4] Specify the corner-* shorthands This specifies 17 shorthands for corner-shape/border-radius - corner-*-* (4 physical, 4 logical) for each corner - corner-* (4 physical, 4 logical) for each side - corner (for specifying all the corners/border-radius in one go) Resolution: w3c#11623 (comment) Closes w3c#11623 * Update css-borders-4/Overview.bs * Update css-borders-4/Overview.bs * Update css-borders-4/Overview.bs * Update css-borders-4/Overview.bs --------- Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>
1 parent 6ac4727 commit f3d0da1

File tree

1 file changed

+65
-0
lines changed

1 file changed

+65
-0
lines changed

css-borders-4/Overview.bs

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,71 @@ The 'corner-*-shape' Shorthands And Longhands</h4>
610610
That is, ''corner-block-start-shape: round square''
611611
sets ''corner-start-start-shape: round; corner-start-end-shape: square;''.
612612

613+
<h4 id="single-corner-shorthands">
614+
Sizing & shaping a corner:
615+
The 'corner-top-left', 'corner-top-right',
616+
'corner-bottom-right', 'corner-bottom-left',
617+
'corner-start-start', 'corner-start-end',
618+
'corner-end-start', 'corner-end-end' shorthands</h4>
619+
620+
<pre class=propdef>
621+
Name: corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right,
622+
corner-start-start, corner-start-end, corner-end-start, corner-end-end
623+
Value: <<length-percentage [0,&infin;]>>{1,2} || <<corner-shape-value>>
624+
Initial: 0
625+
Applies to: all elements (but see prose)
626+
Inherited: no
627+
Percentages: Refer to corresponding dimension of the <a>border box</a>.
628+
Computed value: see individual properties
629+
Animation type: see individual properties
630+
</pre>
631+
632+
The 'corner-*-*' shorthands set the two 'corner-*-*-shape' and 'border-*-*-radius'
633+
longhand properties of the related side.
634+
See the corresponding 'corner-*-*-shape' and 'border-*-*-radius' properties for further details.
635+
636+
637+
<h4 id="corner-side-shorthands">
638+
Sizing & shaping rhe Corners Of One Side:
639+
The 'corner-top', 'corner-right',
640+
'corner-bottom', 'corner-left',
641+
'corner-block-start', 'corner-block-end',
642+
'corner-inline-start', 'corner-inline-end' shorthands</h4>
643+
644+
<pre class=propdef>
645+
Name: corner-top, corner-right, corner-bottom, corner-left,
646+
corner-block-start, corner-block-end, corner-inline-start, corner-inline-end
647+
Value: [ <<length-percentage [0,&infin;]>>{1,2} [ / <<length-percentage [0,&infin;]>>{1,2} ]? ] || <<corner-shape-value>>{1,2}
648+
Initial: 0
649+
Applies to: all elements (but see prose)
650+
Inherited: no
651+
Percentages: Refer to corresponding dimension of the <a>border box</a>.
652+
Computed value: see individual properties
653+
Animation type: see individual properties
654+
</pre>
655+
656+
The 'corner-*' shorthands set the two 'corner-*-shape' longhand properties and two 'border-*-radius'
657+
longhand properties of the related side.
658+
See the corresponding 'corner-*-shape' and 'border-*-radius' properties for further details.
659+
660+
<h4 id="corner-shorthand">
661+
Sizing & Shaping All Corners At Once:
662+
The 'corner' shorthand</h4>
663+
664+
<pre class="propdef">
665+
Name: corner
666+
Value: [ <<length-percentage [0,&infin;]>>{1,4} [ / <<length-percentage [0,&infin;]>>{1,4} ]? ] || <<corner-shape-value>>{1,4}
667+
Initial: 0
668+
Applies to: all elements (but see prose)
669+
Inherited: no
670+
Percentages: Refer to corresponding dimension of the <a>border box</a>.
671+
Computed value: see individual properties
672+
Animation type: see individual properties
673+
</pre>
674+
675+
The 'corner' shorthand sets the 'corner-shape' and 'border-radius' longhands all together.
676+
677+
613678
<h4 id=corner-shape-rendering>
614679
Rendering 'corner-shape'</h4>
615680

0 commit comments

Comments
 (0)