1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: border-color
slug: Web/CSS/border-color
tags:
- CSS
- 'CSS:Dokumentacje'
- Dokumentacje
- Wszystkie_kategorie
translation_of: Web/CSS/border-color
---
<p>{{ CSSRef() }}</p>
<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2>
<p>Własność <code>border-color</code> jest skróconą własnością dla ustawienia koloru czterech krawędzi obramowania elementu.</p>
<p>{{cssinfo}}</p>
<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2>
<pre class="eval">border-color: [ <color> || transparent ]{1,4} | <em>inherit</em>
</pre>
<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3>
<dl>
<dt><color> </dt>
<dd>Kolor może być zdefiniowany jako szesnastkowa wartość RGB, zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory.</dd>
</dl>
<dl>
<dt>transparent </dt>
<dd>Obramowanie nie jest rysowane, ale zajmuje przestrzeń na stronie.</dd>
</dl>
<p>Można ustawić do czterech wartości.</p>
<p>Jeśli dana jest jedna wartość koloru, wtedy wszystkie cztery krawędzie są tego koloru.<br>
Jeśli dwie wartości - obramowanie górne i dolne używa pierwszej wartości, lewe i prawe używa drugiej.<br>
Jeśli trzy wartości - pierwsza jest dla górnej krawędzi, druga dla lewej i prawej, trzecia dla dolnej.<br>
Jesli cztery wartości - pierwsza dla górnego obramowania, druga dla prawego, trzecia dla dolnego i czwarta dla lewego.</p>
<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2>
<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p>
<pre>element {
border-width: 1px;
border-style: solid;
border-color: black;
}
</pre>
<h2 id="Notatki" name="Notatki">Notatki</h2>
<p>W celu zobaczenia obramowania musisz również ustawić {{ Cssxref("border-width") }} na wartość dodatnią oraz {{ Cssxref("border-style") }} na jakąś widoczną.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td>The <code>transparent</code> keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>The property is now a shorthand property</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#border-color', 'border-color') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1.0") }} [1]</td>
<td>4.0</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>4.0</td>
<td>{{ CompatGeckoMobile("1.9.2") }} [1]</td>
<td>7.0</td>
<td>11</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
|
