CSS свойство border-style, поддержка в браузерах, примеры использования // Вебшкола онлайн



up_violet-7288432Перейти к справке CSS

p { border-style:solid;

}

Описание и использование

Свойство CSS border-style задает стиль всех четырех границ элемента в одной записи. Свойство может иметь от одного до четырех значений:

  • border-style:dotted solid double dashed;
    • верхняя граница из точек
    • правая граница сплошная
    • нижняя граница двойная линия
    • левая граница пунктир

  • border-style:dotted solid double;
    • верхняя граница из точек
    • левая и правая граница сплошные
    • нижняя граница двойная

  • border-style:dotted solid;
    • верхняя и нижняя границы из точек
    • правая и левая границы сплошные

  • border-style:dotted;
    • все четыре границы из точек

Заметка: для облегчения запоминания порядка задания стиля бордюров можно запомнить два простых правила:

  1. Бордюры нумеруются с верхнего по часовой стрелки
  2. Вертикальные бордюры имеют приоритет перед горизонтальными, т.е. если указано три цвета, два вертикальных имеют свои цвета, а левый бордюр получает цвет от правого.
Значение по умолчанию нет
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderStyle=»dotted double»

Поддержка в браузерах

chrome-3390305 firefox-5336793 ie-5897780 opera-7172556 safari-1908583
Свойство border-style поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit или hidden.

Возможные значения свойства border-style

Значение Описание
none Без бордюров
hidden Имеет такой же эффект, как и none, за ислючением случаев конфликта ячеек с различным стилем бордюров, при этом левая ячейка бордюра не будет отображаться совсем
dotted Бордюр из точек
dashed Пунктир, бордюр из коротких отрезков линий
solid Сплошная линия
double Бордюр из двух параллельных линий
groove Вдавленный бордюр, эффект создатся за счет цвета
ridge Выпуклый бордюр, эффект создается за счет цвета
inset Трехмерная вдавленная линия
outset Трехмерная выдавленная линия
inherit Значение наследуется от родительского элемента

Связанные страницы

Учебник CSS: CSS border

up_violet-7288432Перейти к справке CSS