Vlastnost border-style

Vlastnost border-style nastavuje styl ohraničení pro všechny strany současně nebo zvlášť pro každou stranu. Je zkratkovou vlastností pro následující vlastnosti: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaxe

selektor {
	border-style: hodnota;
}

Hodnoty

Hodnota	Popis
`solid`	Plná čára.
`dotted`	Ohraničení v podobě teček.
`dashed`	Ohraničení v podobě čárek.
`ridge`	Ohraničení v podobě vypouklé čáry.
`double`	Ohraničení v podobě dvojité čáry. Aby byl efekt vidět, tloušťka ohraničení musí být alespoň `3px`.
`groove`	Vyduté ohraničení.
`inset`	Zaplazené ohraničení.
`outset`	Vypouklé ohraničení.
`none`	Žádné ohraničení.

Výchozí hodnota: none.

Počet hodnot

Vlastnost může přijímat 1, 2, 3 nebo 4 hodnot, uvedených mezerou oddělených:

Počet	Popis
`1`	Typ pro všechny strany současně.
`2`	První hodnota pro horní a dolní stranu, druhá - pro levou a pravou stranu.
`3`	První hodnota pro horní stranu, druhá - pro levou a pravou stranu, třetí - pro dolní stranu.
`4`	První hodnota pro horní stranu, druhá - pro pravou stranu, třetí - pro dolní stranu, čtvrtá - pro levou stranu.

Příklad . Hodnota solid

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

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

Příklad . Hodnota dotted

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

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

Příklad . Hodnota dashed

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

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

Příklad . Hodnota ridge

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

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

Příklad . Hodnota double

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

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

Příklad . Hodnota groove

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

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

Příklad . Hodnota inset

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

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

Příklad . Hodnota outset

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

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

Příklad

V tomto příkladu jsou nastaveny různé typy ohraničení pro různé strany prvku:

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

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

Příklad

A nyní jsou pro různé strany prvku také nastaveny různé tloušťky ohraničení a jeho barva:

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

Příklad

Nyní je pro horní a dolní stranu nastaven typ solid, a pro pravou a levou - dotted:

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

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

Viz také

vlastnost border-color,
která nastavuje barvu ohraničení
vlastnost border-width,
která nastavuje tloušťku ohraničení
vlastnost border,
která je zkratkovou vlastností pro ohraničení