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

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

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

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

Результат:

Příklad . Hodnota dotted

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

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

Результат:

Příklad . Hodnota dashed

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

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

Результат:

Příklad . Hodnota ridge

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

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

Результат:

Příklad . Hodnota double

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

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

Результат:

Příklad . Hodnota groove

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

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

Результат:

Příklad . Hodnota inset

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

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

Результат:

Příklad . Hodnota outset

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

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

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

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

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

Результат:

Příklad

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

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

css#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í