border-style

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Краткая информация

Синтаксис

border-style: [none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset] {1,4}

Значения

Для управления видом границы предоставляется несколько значений свойства border-style. Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселей.

Кроме перечисленных в таблице значений используются следующие ключевые слова.

none

Не отображает границу и её толщина (border-width) задаётся нулевой.

hidden

Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

div {
  padding: 10px; 
  border: 5px #fc0;
  border-style: {{ playgroundValue }};
}

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-style

Объектная модель

Объект.style.borderStyle

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Браузеры