Skip to content

Commit 6aa37b4

Browse files
fantasaifantasai
committed
[css-backgrounds-4] border-corner-shape -> corner-shape, add corners shorthand, allow values per corner, add issues
1 parent 3bab439 commit 6aa37b4

File tree

2 files changed

+855
-5826
lines changed

2 files changed

+855
-5826
lines changed

‎css-backgrounds-4/Overview.bs

Lines changed: 96 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ ED: http://dev.w3.org/csswg/css-backgrounds-4/
1010
Editor: Bert Bos, W3C, bert@w3.org
1111
Editor: Elika J. Etemad, Invited Expert, http://fantasai.inkedblade.net/contact
1212
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/
13-
Abstract: This module contains the features of CSS relating to the borders and backgrounds of boxes on the page. It includes and extends the functionality of <a href="http://www.w3.org/TR/css3-background/">CSS Backgrounds and Borders Level&nbsp;3</a>. [[CSS3BACKGROUND]] The main extensions compared to level&nbsp;3 are shaping ('corner-shape') and clipping borders ('border-clip'), logical background positions ('background-position'), and the ''extend'' ability of 'background-repeat'.
13+
Abstract: This module contains the features of CSS relating to the borders and backgrounds of boxes on the page. It includes and extends the functionality of <a href="http://www.w3.org/TR/css3-background/">CSS Backgrounds and Borders Level&nbsp;3</a>. [[CSS3BG]] The main extensions compared to level&nbsp;3 are shaping ('corner-shape') and clipping borders ('border-clip'), logical background positions ('background-position'), and the ''extend'' ability of 'background-repeat'.
1414
Ignored Terms:
1515
</pre>
1616

@@ -23,39 +23,113 @@ Introduction</h2>
2323
as this will reduce the effort of keeping them in sync
2424
(source diffs will be accurate in reflecting the differences).
2525

26-
<h3 id=border-corner-shape>
27-
The 'border-corner-shape' property</h3>
26+
<h2 id="corners">
27+
Corners</h2>
28+
29+
<h3 id=corner-sizing>
30+
Corner Sizing: the 'border-radius property</h3>
2831

2932
<pre class='propdef'>
30-
Name: border-corner-shape
31-
Value: curve | bevel | scoop | notch
32-
Initial: curve
33-
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
34-
Inherited: no
35-
Percentages: n/a
36-
Media: visual
37-
Computed value: specified value
38-
Animatable: no
33+
Name: border-radius
34+
Value: [ <<length>> | <<percentage>> ]{1,4} [ / [ <<length>> | <<percentage>> ]{1,4} ]?
35+
Initial: 0
36+
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
37+
Inherited: no
38+
Percentages: n/a
39+
Media: visual
40+
Computed value: specified value
41+
Animatable: no
42+
Canonical order: n/a
43+
</pre>
44+
45+
See [[CSS3BG]].
46+
47+
<h3 id=corner-shaping>
48+
Corner Shaping: the 'corner-shape' property</h3>
49+
50+
<pre class='propdef'>
51+
Name: corner-shape
52+
Value: [round | bevel | scoop | notch]{1,4}
53+
Initial: round
54+
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
55+
Inherited: no
56+
Percentages: n/a
57+
Media: visual
58+
Computed value: specified value
59+
Animatable: no
3960
Canonical order: n/a
4061
</pre>
4162

4263
By default, non-zero border-radii define
4364
a quarter-ellipse that rounds the affected corners.
4465
However in some cases, other corner shapes are desired.
45-
The 'border-corner-shape' property specifies a reinterpretation of the radii
66+
The 'corner-shape' property specifies a reinterpretation of the radii
4667
to define other corner shapes.
4768

48-
<dl dfn-type="value" dfn-for="border-corner-shape">
49-
<dt><dfn>''curve''</dfn>
50-
<dd>Border radii define a convex curve at the corner.
69+
<dl dfn-type="value" dfn-for="corner-shape">
70+
<dt><dfn>''round''</dfn>
71+
<dd>Border radii define a convex elliptical curve at the corner.
5172
<dt><dfn>''bevel''</dfn>
5273
<dd>Border radii define a diagonal slice at the corner.
5374
<dt><dfn>''scoop''</dfn>
54-
<dd>Border radii define a concave curve at the corner.
75+
<dd>Border radii define a concave elliptical curve at the corner.
5576
<dt><dfn>''notch''</dfn>
5677
<dd>Border radii define a concave rectangular notch at the corner.
5778
</dl>
5879

80+
<div class="example">
81+
For example, the following declarations create a right-pointing next button.
82+
<pre>
83+
a {
84+
border-radius: 0 2em 2em 0;
85+
corner-shape: bevel;
86+
padding: 0.5em 2em 0.5em 0.5em;
87+
</pre>
88+
As a fallback in UAs that don't support 'border-radius',
89+
the right side would be rounded rather than pointy.
90+
</div>
91+
92+
<p class="issue">
93+
For ''scoop'' and ''notch'', how do the color/style/width transitions work?
94+
Do they transition once in the middle, or alternate to match the topness/sideness of that segment of the border?
95+
96+
<p class="issue">
97+
Add a ''cubic-bezier()'' function for random other shapes?
98+
Or some other functions?
99+
100+
<h3 id="corners-shorthand">
101+
Corner Shape and Size: the 'corners' shorthand</h3>
102+
103+
<pre class='propdef'>
104+
Name: corners
105+
Value: <<'corner-shape'>> || <<'border-radius'>>
106+
Initial: see individual properties
107+
Applies to: <a>grid containers</a>
108+
Inherited: see individual properties
109+
Percentages: see individual properties
110+
Media: visual
111+
Computed value: see individual properties
112+
</pre>
113+
114+
The 'corners' shorthand sets 'corner-shape' and 'border-radius' in the same declaration.
115+
If either is omitted, it is reset to its initial value.
116+
117+
<div class="example">
118+
For example, the following declaration creates a diamond shape.
119+
<pre>corners: bevel 50%;</pre>
120+
In UAs that don't support 'corner-shape', the declaration is ignored
121+
(falls back to a rectangle).
122+
</div>
123+
124+
<div class="example">
125+
In this example, the first declaration creates tabs with vertical sides and rounded corners using 'border-radius',
126+
while the second example makes them trapezoid-shaped in UAs that support 'corners'.
127+
<pre>
128+
border-radius: 0.25em 0.25em 0 0;
129+
corners: bevel 0.25em 0.25em 0 0 / 50% 50% 0 0;
130+
</pre>
131+
</div>
132+
59133
<h2 id="partial-borders">
60134
Partial borders</h2>
61135

@@ -173,9 +247,9 @@ The 'border-clip' properties</h3>
173247
<p>These properties split their respective borders into parts along
174248
the border edge. The first part is visible, the second is invisible,
175249
the third part is visible, etc. Parts can be specified with lengths,
176-
percentages, or fractions (expressed by the 'fr' unit, as per
250+
percentages, or fractions (expressed by the ''fr'' unit, as per
177251
[[CSS3GRID]] or its <a href="http://dev.w3.org/csswg/css3-grid/">editor's
178-
edition</a>). The 'normal' value means
252+
edition</a>). The ''normal'' value means
179253
that the border is not split, but shown normally.
180254

181255
<p>'border-clip' is a shorthand property for the four individual properties.
@@ -439,14 +513,14 @@ Additions Since Level 3</h3>
439513
<li>the ''extend'' keyword of 'background-repeat'
440514
<li>'corner-shape'
441515
<li>multiple borders per element
442-
<li>'border-clip' / 'border-parts'
443-
<li>5-way slicing for 'border-image'?
516+
<li>'border-clip' / 'border-limit'
517+
<li>5-way slicing for border-image?
444518
</ul>
445519

446520
<h2 id="acknowledgments">Acknowledgments</h2>
447521

448522
<p>In addition to the many contributors to the [[CSS1]], [[CSS21]],
449-
and [[CSS3BACKGROUND]] predecessors to this module,
523+
and [[CSS3BG]] predecessors to this module,
450524
the editors would like to thank
451525
Tab Atkins,
452526
and Håkon Wium Lie

0 commit comments

Comments
 (0)