Właściwość border-style

Właściwość border-style ustawia styl obramowania dla wszystkich stron jednocześnie lub osobno dla każdej strony. Jest właściwością-skrótem dla następujących właściwości: border-left-style, border-right-style, border-top-style, border-bottom-style.

Składnia

selektor {
	border-style: wartość;
}

Wartości

Wartość	Opis
`solid`	Ciągła linia.
`dotted`	Obramowanie w postaci kropek.
`dashed`	Obramowanie w postaci kresek.
`ridge`	Obramowanie w postaci wypukłej linii.
`double`	Obramowanie w postaci podwójnej linii. Aby zobaczyć efekt, grubość obramowania musi wynosić co najmniej `3px`.
`groove`	Wklęsłe obramowanie.
`inset`	Wcięte obramowanie.
`outset`	Wypukłe obramowanie.
`none`	Brak obramowania.

Wartość domyślna: none.

Liczba wartości

Właściwość może przyjmować 1, 2, 3 lub 4 wartości, podawanych poprzez spację:

Liczba	Opis
`1`	Typ dla wszystkich stron jednocześnie.
`2`	Pierwsza wartość dla góry i dołu, druga - dla lewej i prawej granicy.
`3`	Pierwsza wartość dla góry, druga - dla lewej i prawej granicy, trzecia - dla dolnej.
`4`	Pierwsza wartość dla górnej granicy, druga - dla prawej, trzecia - dla dolnej, czwarta - dla lewej granicy.

Przykład . Wartość solid

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład . Wartość dotted

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład . Wartość dashed

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład . Wartość ridge

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład . Wartość double

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład . Wartość groove

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład . Wartość inset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład . Wartość outset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład

W tym przykładzie ustawiono różne typy obramowania dla różnych stron elementu:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Przykład

A teraz dla różnych stron elementu również ustawiono różną grubość obramowania i jego kolor:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Przykład

Teraz dla górnej i dolnej granicy ustawiono typ solid, a dla prawej i lewej - dotted:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Zobacz też

właściwość border-color,
która ustawia kolor obramowania
właściwość border-width,
która ustawia grubość obramowania
właściwość border,
która jest właściwością-skrótem dla obramowania