CSS Border Properties
Właściwość |
Opis |
możliwe wartości |
Przykłady |
border-top-color |
Deklaracja koloru górnej krawędzi
|
Nazwy kolorów RGB lub ich oznaczenia szesnastkowe lub domyślnie przeźroczyste.
|
div { border-top-color:green; }
div { border-top-color:#00FF00; }
|
border-top-style |
Deklaracja stylu górnej krawędzi
|
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
|
div { border-top-style:solid; }
div { border-top-style:inset; }
|
border-top-width |
Deklaracja grubości górnej krawędzi
|
Grubość wyrażona w trzech predefiniowanych wartościach:
thin
medium
thick
|
div { border-top-width:2px; }
div { border-top-width:thin; }
|
border-top |
Skrócona forma podania wszystkich właściwości górnej krawędzi.
|
Wartości oddzielone spacją według kolejności (te, które nie są określone
przyjmą wartość domyślną lub dziedziczoną):
border-top-width
border-top-style
border-top-color
|
div { border-top:2px solid green; }
div { border-top:thick double #00FF00; }
|
border-right-color |
Deklaracja koloru prawej krawędzi
|
Nazwy kolorów RGB lub ich oznaczenia szesnastkowe lub domyślnie przeźroczyste.
|
div { border-right-color:green; }
div { border-right-color:#00FF00; }
|
border-right-style |
Deklaracja stylu prawej krawędzi
|
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
|
div { border-right-style:solid; }
div { border-right-style:inset; }
|
border-right-width |
Deklaracja grubości prawej krawędzi
|
Grubość wyrażona w trzech predefiniowanych wartościach:
thin
medium
thick
|
div { border-right-width:2px; }
div { border-right-width:thin; }
|
border-right |
Skrócona forma podania wszystkich właściwości prawej krawędzi.
|
Wartości oddzielone spacją według kolejności (te, które nie są określone
przyjmą wartość domyślną lub dziedziczoną):
border-right-width
border-right-style
border-right-color
|
div { border-right:2px solid green; }
div { border-right:thick double #00FF00; }
|
border-bottom-color |
Deklaracja koloru dolnej krawędzi
|
Nazwy kolorów RGB lub ich oznaczenia szesnastkowe lub domyślnie przeźroczyste.
|
div { border-bottom-color:green; }
div { border-bottom-color:#00FF00; }
|
border-bottom-style |
Deklaracja stylu dolnej krawędzi
|
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
|
div { border-bottom-style:solid; }
div { border-bottom-style:inset; }
|
border-bottom-width |
Deklaracja grubości dolnej krawędzi
|
Grubość wyrażona w trzech predefiniowanych wartościach:
thin
medium
thick
|
div { border-bottom-width:2px; }
div { border-bottom-width:thin; }
|
border-bottom |
Skrócona forma podania wszystkich właściwości dolnej krawędzi.
|
Wartości oddzielone spacją według kolejności (te, które nie są określone
przyjmą wartość domyślną lub dziedziczoną):
border-bottom-width
border-bottom-style
border-bottom-color
|
div { border-bottom:2px solid green; }
div { border-bottom:thick double #00FF00; }
|
border-left-color |
Deklaracja koloru lewej krawędzi
|
Nazwy kolorów RGB lub ich oznaczenia szesnastkowe lub domyślnie przeźroczyste.
|
div { border-left-color:green; }
div { border-left-color:#00FF00; }
|
border-left-style |
Deklaracja stylu lewej krawędzi
|
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
|
div { border-left-style:solid; }
div { border-left-style:inset; }
|
border-left-width |
Deklaracja grubości lewej krawędzi
|
Grubość wyrażona w trzech predefiniowanych wartościach:
thin
medium
thick
|
div { border-left-width:2px; }
div { border-left-width:thin; }
|
border-left |
Skrócona forma podania wszystkich właściwości lewej krawędzi.
|
Wartości oddzielone spacją według kolejności (te, które nie są określone
przyjmą wartość domyślną lub dziedziczoną):
border-left-width
border-left-style
border-left-color
|
div { border-left:2px solid green; }
div { border-left:thick double #00FF00; }
|
border-color |
Deklaracja koloru wszystkich krawędzi
|
Nazwy kolorów RGB lub ich oznaczenia szesnastkowe lub domyślnie przeźroczyste.
Kolor każdej krawędzi oddzielony spacją, deklaracja koloru krawędzi w
następującej kolejności:
border-top-color
border-right-color
border-bottom-color
border-left-color
Wartości niezdeklarowane przyjmują zapis uproszczony. Jeśli podany
jest tylko jeden kolor, to będzie zastosowany do wszystkich czterech krawędzi.
Jeśli podane są dwa kolory, to pierwszy jest dla dolnej i górnej krawędzi,
a drugi dla lewej i prawej. Jeśli podane są tylko trzy kolory to
pierwszy dotyczy górnej krawędzie, drugi prawej i lewej, a trzeci dolnej
krawędzi.
|
div { border-color:green red blue olive; }
div { border-color:green; }
div { border-color:green red; }
div { border-color:green red blue; }
|
border-style |
Deklaracja stylu wszystkich krawędzi
|
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outsetWartości niezdeklarowane przyjmują zapis uproszczony. Jeśli
tylko jeden styl jest podany to dotyczy on wszystkich czterech krawędzi. Jeśli
dwa style są podane, to pierwszy dotyczy górnej i dolnej krawędzi, a
drugi prawej i lewej. Jeśli podane są trzy style to pierwszy dotyczy górnej
krawędzi, drugi prawej i lewej, a trzeci dolnej krawędzi
|
div { border-style:solid dotted dashed double; }
div { border-style:solid; }
div { border-style:solid dotted; }
div { border-style:solid dotted dashed; }
|
border-width |
Deklaracja grubości wszystkich krawędzi
|
Grubość wyrażona w trzech predefiniowanych wartościach:
thin
medium
thick
Wartości niezdeklarowane przyjmują zapis uproszczony. Jeśli tylko jedna
grubość jest podana to dotyczy on wszystkich czterech krawędzi. Jeśli dwie
grubości są podane, to pierwsza dotyczy górnej i dolnej krawędzi, a druga
prawej i lewej. Jeśli podane są trzy grubości to pierwsza dotyczy górnej
krawędzi, druga prawej i lewej, a trzecia dolnej krawędzi
|
div { border-width:1px 3px 5px 2px; }
div { border-width:thin; }
div { border-width:2px 4px; }
div { border-width:2px 4px 5px; }
|
border |
Jeśli wszystkie cztery krawędzie mają ten sam wygląd można użyć jednej
deklaracji.
|
Wartości oddzielone spacją według kolejności (te, które nie są określone
przyjmą wartość domyślną lub dziedziczoną):
border-width
border-style
border-color
|
div { border:1px double green; }
div { border:thin solid #00FF00; }
|