border-style

Свойство 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.