Lastnost border-style

Lastnost border-style določa slog obrobe za vse strani hkrati ali ločeno za vsako stran. Je okrajšana lastnost za naslednje lastnosti: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksa

cssselektor {
  border-style: vrednost;
}

Vrednosti

Vrednost	Opis
`solid`	Polna črta.
`dotted`	Obroba v obliki pik.
`dashed`	Obroba v obliki črtkanja.
`ridge`	Obroba v obliki izbočene črte.
`double`	Obroba v obliki dvojne črte. Za učinek mora biti debelina obrobe vsaj `3px`.
`groove`	Vbočena obroba.
`inset`	Vtisnjena obroba.
`outset`	Izbokla obroba.
`none`	Brez obrobe.

Privzeta vrednost: none.

Število vrednosti

Lastnost lahko sprejme 1, 2, 3 ali 4 vrednosti, ločene s presledkom:

Število	Opis
`1`	Tip za vse strani hkrati.
`2`	Prva vrednost za vrh in dno, druga - za levo in desno obrobo.
`3`	Prva vrednost za vrh, druga - za levo in desno obrobo, tretja - za spodnjo.
`4`	Prva vrednost za zgornjo obrobo, druga - za desno, tretja - za spodnjo, četrta - za levo obrobo.

Primer . Vrednost solid

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

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

Результат:

Primer . Vrednost dotted

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

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

Результат:

Primer . Vrednost dashed

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

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

Результат:

Primer . Vrednost ridge

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

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

Результат:

Primer . Vrednost double

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

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

Результат:

Primer . Vrednost groove

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

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

Результат:

Primer . Vrednost inset

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

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

Результат:

Primer . Vrednost outset

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

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

Результат:

Primer

V tem primeru so določeni različni tipi obrobe za različne strani elementa:

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

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

Результат:

Primer

Tukaj so za različne strani elementa določene tudi različne debeline obrobe in njena barva:

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;
}

Результат:

Primer

Tukaj sta za zgornjo in spodnjo obrobo določena tip solid, za desno in levo pa dotted:

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

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

Результат:

Glejte tudi

lastnost border-color,
ki določa barvo obrobe
lastnost border-width,
ki določa debelino obrobe
lastnost border,
ki je okrajšana lastnost za obrobo