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

cssselektor {
  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

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

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

Результат:

Przykład . Wartość dotted

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

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

Результат:

Przykład . Wartość dashed

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

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

Результат:

Przykład . Wartość ridge

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

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

Результат:

Przykład . Wartość double

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

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

Результат:

Przykład . Wartość groove

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

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

Результат:

Przykład . Wartość inset

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

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

Результат:

Przykład . Wartość outset

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

css#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:

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

css#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:

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

css#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:

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

css#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