мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство border-style

Свойство border-style задает стиль границы для всех сторон одновременно или отдельно для каждой стороны. Является свойством-сокращением для следующих свойств: border-left-style, border-right-style, border-top-style, border-bottom-style.

Синтаксис

селектор { border-style: значение; }

Значения

Значение Описание
solid Сплошная линия.
dotted Граница в виде точек.
dashed Граница в виде тире.
ridge Граница в виде выпуклой линии.
double Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум 3px.
groove Вогнутая граница.
inset Вдавленная граница.
outset Выпуклая граница.
none Отсутствие границы.

Значение по умолчанию: none.

Количество значений

Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:

Количество Описание
1 Тип для всех сторон одновременно.
2 Первое значение для верха и низа, второе - для левой и правой границ.
3 Первое значение для верха, второе - для левой и правой границ, третье - для нижней.
4 Первое значение для верхней границы, второе - для правой, третье - для нижней, четвертое - для левой границы.

Пример . Значение solid

<div id="elem"></div> #elem { border-width: 1px; border-style: solid; border-color: black; width: 300px; height: 100px; }

:

Пример . Значение dotted

<div id="elem"></div> #elem { border-width: 1px; border-style: dotted; border-color: black; width: 300px; height: 100px; }

:

Пример . Значение dashed

<div id="elem"></div> #elem { border-width: 1px; border-style: dashed; border-color: black; width: 300px; height: 100px; }

:

Пример . Значение ridge

<div id="elem"></div> #elem { border-width: 3px; border-style: ridge; border-color: black; width: 300px; height: 100px; }

:

Пример . Значение double

<div id="elem"></div> #elem { border-width: 3px; border-style: double; border-color: black; width: 300px; height: 100px; }

:

Пример . Значение groove

<div id="elem"></div> #elem { border-width: 3px; border-style: groove; border-color: black; width: 300px; height: 100px; }

:

Пример . Значение inset

<div id="elem"></div> #elem { border-width: 3px; border-style: inset; border-color: black; width: 300px; height: 100px; }

:

Пример . Значение outset

<div id="elem"></div> #elem { border-width: 3px; border-style: outset; border-color: black; width: 300px; height: 100px; }

:

Пример

В данном примере заданы различные типы границы для разных сторон элементов:

<div id="elem"></div> #elem { border-width: 1px; border-style: solid dotted dashed dotted; border-color: black; width: 300px; height: 100px; }

:

Пример

А сейчас для разных сторон элемента также задана различная толщина границы и ее цвет:

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

:

Пример

Сейчас для верхней и нижней границы задан тип solid, а для правой и левой - dotted:

<div id="elem"></div> #elem { border-width: 1px; border-style: solid dotted; border-color: black; width: 300px; height: 100px; }

:

Смотрите также

  • свойство border-color,
    которое задает цвет границы
  • свойство border-style,
    которое задает внешний вид границы
  • свойство border,
    которое является свойством-сокращением для границы