Svojstvo border-style

Svojstvo border-style zadaje stil granice za sve strane istovremeno ili odvojeno za svaku stranu. Predstavlja skraćenu formu za sledeća svojstva: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksa

cssselektor {
  border-style: vrednost;
}

Vrednosti

Vrednost	Opis
`solid`	Puna linija.
`dotted`	Granica u vidu tačaka.
`dashed`	Granica u vidu crtice.
`ridge`	Granica u vidu ispupčene linije.
`double`	Granica u vidu duple linije. Da bi se video efekat, debljina granice mora biti najmanje `3px`.
`groove`	Udubljena granica.
`inset`	Uvučena granica.
`outset`	Ispupčena granica.
`none`	Odsustvo granice.

Podrazumevana vrednost: none.

Broj vrednosti

Svojstvo može da prima 1, 2, 3 ili 4 vrednosti, koje se navode razmakom:

Broj	Opis
`1`	Tip za sve strane istovremeno.
`2`	Prva vrednost za gornju i donju, druga - za levu i desnu granicu.
`3`	Prva vrednost za gornju, druga - za levu i desnu granicu, treća - za donju.
`4`	Prva vrednost za gornju granicu, druga - za desnu, treća - za donju, četvrta - za levu granicu.

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

U ovom primeru su zadati različiti tipovi granice za različite strane 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

A sada za različite strane elementa su takođe zadati različita debljina granice i njenoj boja:

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

Sada su za gornju i donju granicu zadati tip solid, a za desnu i levu - dotted:

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

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

Результат:

Pogledajte takođe

svojstvo border-color,
koje zadaje boju granice
svojstvo border-width,
koje zadaje debljinu granice
svojstvo border,
koje predstavlja skraćenu formu za granicu