8000 [css-backgrounds-4] Listify border-color (per resolution for #1172) · w3c/csswg-drafts@76af806 · GitHub
Skip to content

Commit 76af806

Browse files
LeaVerouLeaVerou
committed
[css-backgrounds-4] Listify border-color (per resolution for #1172)
1 parent dc0e250 commit 76af806

3 files changed

Lines changed: 97 additions & 0 deletions

File tree

‎css-backgrounds-4/Overview.bs‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,103 @@ Painting Area: the 'background-clip' property</h3>
147147
and the geometry of the text in the element and its in-flow and floated descendants.
148148
</dl>
149149

150+
<h2 id="borders">
151+
Borders</h2>
152+
153+
<h3 id="the-border-color">Line Colors: the 'border-color' properties</h3>
154+
155+
<table class="propdef">
156+
<tr>
157+
<th>Name:
158+
<td><dfn>border-top-color</dfn> ,
159+
<dfn>border-right-color</dfn>,
160+
<dfn>border-bottom-color</dfn>,
161+
<dfn>border-left-color</dfn>
162+
<tr>
163+
<th><a href="#values">Value</a>:
164+
<td><<color>>#
165+
<tr>
166+
<th>Initial:
167+
<td><a href="https://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
168+
<tr>
169+
<th>Applies to:
170+
<td>all elements
171+
<tr>
172+
<th>Inherited:
173+
<td>no
174+
<tr>
175+
<th>Percentages:
176+
<td>N/A
177+
<tr>
178+
<th>Media:
179+
<td>visual
180+
<tr>
181+
<th>Computed value:
182+
<td>the computed color
183+
<tr>
184+
<th>Animatable:
185+
<td>as <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a>
186+
</table>
187+
188+
<table class="propdef">
189+
<tr>
190+
<th>Name:
191+
<td><dfn id="border-color">border-color</dfn>
192+
<tr>
193+
<th><a href="#values">Value</a>:
194+
<td><<color>>{1,4}#
195+
<tr>
196+
<th>Initial:
197+
<td>(see individual properties)
198+
<tr>
199+
<th>Applies to:
200+
<td>all elements
201+
<tr>
202+
<th>Inherited:
203+
<td>no
204+
<tr>
205+
<th>Percentages:
206+
<td>N/A
207+
<tr>
208+
<th>Media:
209+
<td>visual
210+
<tr>
211+
<th>Computed value:
212+
<td>see individual properties
213+
<tr>
214+
<th>Animatable:
215+
<td>see individual properties
216+
</table>
217+
218+
<p>These properties set the foreground color of the border specified
219+
by the <span class=property>border-style</span> properties.
220+
If a list of values is provided, the border is split into equal width bands of each color
221+
along the direction of the side the border is applied on (i.e. split horizontally on left and right borders and vertically on top and bottom borders),
222+
starting outwards.
223+
224+
<p>'Border-color' is a shorthand for the
225+
four 'border-*-color' properties. The four values set the top, right,
226+
bottom and left border, respectively. A missing left is the same as
227+
right, a missing bottom is the same as top, and a missing right is
228+
also the same as top. This is resolved individually for each list item.
229+
230+
<div class="example">
231+
Using multiple colors for each side:
232+
233+
<pre>
234+
border: 30px solid;
235+
border-color: skyblue orange yellowgreen indianred, black yellow;
236+
</pre>
237+
238+
Sample rendering:
239+
240+
<img src="images/multicolor-border.png" alt="">
241+
242+
The same border colors with 'border-style: dotted':
243+
244+
<img src="images/multicolor-border-dotted.png" alt="">
245+
</div>
246+
150247
<h2 id="corners">
151248
Corners</h2>
152249

‎css-backgrounds-4/images/multicolor-border-dotted.png‎

45.9 KB
Loading

‎css-backgrounds-4/images/multicolor-border.png‎

19.8 KB
Loading

0 commit comments

Comments
 (0)