Својство border-style

Својството border-style го поставува стилот на границата за сите страни истовремено или одделно за секоја страна. Тоа е кратенка-својство за следните својства: border-left-style, border-right-style, border-top-style, border-bottom-style.

Синтакса

cssселектор {
  border-style: вредност;
}

Вредности

Вредност	Опис
`solid`	Цврста линија.
`dotted`	Граница во форма на точки.
`dashed`	Граница во форма на цртички.
`ridge`	Граница во форма на испакната линија.
`double`	Граница во форма на двојна линија. За да се види ефектот, дебелината на границата мора да биде најмалку `3px`.
`groove`	Вдлабната граница.
`inset`	Втисната граница.
`outset`	Испакната граница.
`none`	Отсуство на граница.

Стандардна вредност: none.

Број на вредности

Својството може да прими 1, 2, 3 или 4 вредности, наведени преку празно место:

Број	Опис
`1`	Тип за сите страни истовремено.
`2`	Прва вредност за горниот и долниот раб, втора - за левата и десната граница.
`3`	Прва вредност за горниот раб, втора - за левата и десната граница, трета - за долниот.
`4`	Прва вредност за горната граница, втора - за десната, трета - за долната, четврта - за левата граница.

Пример . Вредност solid

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

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

Результат:

Пример . Вредност dotted

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

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

Результат:

Пример . Вредност dashed

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

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

Результат:

Пример . Вредност ridge

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

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

Результат:

Пример . Вредност double

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

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

Результат:

Пример . Вредност groove

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

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

Результат:

Пример . Вредност inset

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

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

Результат:

Пример . Вредност outset

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

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

Результат:

Пример

Во овој пример се зададени различни типови на граница за различни страни на елементот:

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

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

Результат:

Пример

А сега за различни страни на елементот исто така е зададена различна дебелина на границата и нејзината боја:

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

Результат:

Пример

Сега за горната и долната граница е зададен тип solid, а за десната и левата - dotted:

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

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

Результат:

Погледнете ги и

својството border-color,
кое ја задава бојата на границата
својството border-width,
кое ја задава дебелината на границата
својството border,
кое е кратенка-својство за границата