Vlastnosť border-style

Vlastnosť border-style nastavuje štýl ohraničenia pre všetky strany súčasne alebo samostatne pre každú stranu. Je to vlastnosť-skratka pre nasledujúce vlastnosti: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntax

selektor {
	border-style: hodnota;
}

Hodnoty

Hodnota	Popis
`solid`	Plná čiara.
`dotted`	Ohraničenie v podobe bodiek.
`dashed`	Ohraničenie v podobe pomlčiek.
`ridge`	Ohraničenie v podobe vypuklej línie.
`double`	Ohraničenie v podobe dvojitej línie. Aby bol efekt viditeľný, hrúbka ohraničenia musí byť aspoň `3px`.
`groove`	Vpustené ohraničenie.
`inset`	Zapustené ohraničenie.
`outset`	Vypuklé ohraničenie.
`none`	Žiadne ohraničenie.

Predvolená hodnota: none.

Počet hodnôt

Vlastnosť môže prijať 1, 2, 3 alebo 4 hodnôt, uvedených medzerou:

Počet	Popis
`1`	Typ pre všetky strany súčasne.
`2`	Prvá hodnota pre vrch a dno, druhá - pre ľavú a pravú stranu.
`3`	Prvá hodnota pre vrch, druhá - pre ľavú a pravú stranu, tretia - pre dolnú.
`4`	Prvá hodnota pre hornú stranu, druhá - pre pravú, tretia - pre dolnú, štvrtá - pre ľavú stranu.

Príklad . Hodnota solid

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

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

Príklad . Hodnota dotted

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

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

Príklad . Hodnota dashed

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

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

Príklad . Hodnota ridge

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

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

Príklad . Hodnota double

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

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

Príklad . Hodnota groove

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

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

Príklad . Hodnota inset

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

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

Príklad . Hodnota outset

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

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

Príklad

V tomto príklade sú nastavené rôzne typy ohraničenia pre rôzne strany elementu:

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

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

Príklad

A teraz pre rôzne strany elementu sú tiež nastavené rôzne hrúbky ohraničenia a jeho farba:

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

Príklad

Teraz pre hornú a dolnú stranu je nastavený typ solid, a pre pravú a ľavú - dotted:

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

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

Pozri tiež

vlastnosť border-color,
ktorá nastavuje farbu ohraničenia
vlastnosť border-width,
ktorá nastavuje hrúbku ohraničenia
vlastnosť border,
ktorá je vlastnosťou-skratkou pre ohraničenie