border-style

Рамку можно сделать двойной, пунктирной и даже объёмной в точку! И всё это одним свойством.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство border-style управляет стилем рамки элемента.

Пример

Скопировано

Вокруг абзаца текста будет рамка, состоящая из чёрточек:

        
          
          p {  border-style: dashed;}
          p {
  border-style: dashed;
}

        
        
          
        
      

Как пишется

Скопировано

Стиль рамки задаётся при помощи ключевых слов:

  • none — отключает рамку (значение по умолчанию).
  • solid — сплошная рамка. Этот стиль используется чаще всего.
  • dotted — рамка состоит из точек с пробелами между ними.
  • dashed — рамка состоит из коротких чёрточек с пробелами между ними.
  • double — рамка состоит из двух сплошных линий с небольшим нерегулируемым отступом между ними.

Редкие значения

Скопировано

Ниже будут перечислены редко используемые стили рамки:

  • groove — рамка объёмная, с тенями от источника света, находящегося в верхнем левом наружном углу.
  • ridge — рамка объёмная, с тенями от источника света, находящегося в нижнем правом внешнем углу.
  • inset — рамка с тенями от источника света, находящегося в нижнем правом внутреннем углу.
  • outset — рамка с тенями от источника света, находящегося в левом верхнем внутреннем углу.

Понять текстовое описание этих стилей довольно сложно, посмотрите пример ниже:

Открыть демо в новой вкладке

Как понять

Скопировано

Свойство border-style является шорткатом для свойств:

  • border-bottom-style
  • border-left-style
  • border-right-style
  • border-top-style

Но без особой необходимости эти свойства отдельно не используются. Более того, чаще всего стиль рамки задаётся внутри шортката border.

Подсказки

Скопировано

💡 Достаточно определить стиль рамки для того, чтобы она появилась вокруг элемента. Остальные значения будут установлены в значения по умолчанию: ширина рамки 3 пикселя, а цвет такой же, как унаследованный цвет текста (по умолчанию — чёрный).

💡 Если рамка тонкая, например, 1 пиксель, то внешне значение double почти не будет отличаться от solid. Для визуальной разницы задавайте рамку большей ширины.

💡 Если border-style свойство применяется к таблице со свойством border-collapse в значении collapsed, то inset будет вести себя как groove, outset — как ridge.