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

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

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

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

Primer . Vrednost dotted

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

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

Primer . Vrednost dashed

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

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

Primer . Vrednost ridge

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

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

Primer . Vrednost double

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

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

Primer . Vrednost groove

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

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

Primer . Vrednost inset

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

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

Primer . Vrednost outset

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

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

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

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

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

Primer

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

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

#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