border-width

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

Для того чтобы увидеть работу свойства, необходимо помимо толщины рамки добавить ещё и значение свойства border-style.

        
          
          <p class="text">Блок текста, обведённый рамкой</p>
          <p class="text">Блок текста, обведённый рамкой</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .text {  border-style: solid;  border-width: 4px;}
          .text {
  border-style: solid;
  border-width: 4px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Для задания толщины можно использовать три переменные - thin, medium или thick, в большинстве браузеров это соответствует размерам 2 px, 4 px и 6 px соответственно.

Сама же спецификация не приравнивает эти переменные к определённому размеру, а только говорит что значение thin должно быть меньше medium, а оно, в свою очередь, меньше thick, остальное контролируется на уровне браузера. Поэтому, для более точного значения, толщину можно указывать в пикселах или других единицах измерения.

Ключевое слово inherit наследует значение родителя, а initial применяет значение по умолчанию, равное medium.

Разрешается указывать одно, два, три или четыре значения. В зависимости от этого получится разный результат:

1. border-width: 1px — одно значение, толщина рамки со всех сторон одинаковая.
2. border-width: 1px 2px — два значения, первое устанавливает толщину рамки сверху и снизу, второе — слева и справа.
3. border-width: 1px 2px 3px — три значения, первое значение устанавливает толщину рамки сверху, второе — слева и справа, а третье — снизу.
4. border-width: 1px 2px 3px 4px — четыре значения, устанавливает для каждой стороны свою толщину, поочерёдно: для верхней, правой, нижней и левой рамки.

Чаще всего это свойство используется в шорткате border, так как обычно задаётся сразу и цвет и стиль и толщина рамки, а сокращённая форма позволяет сделать это более элегантно.

На этом демо можете посмотреть как выглядят разные размеры толщины рамки при разных значениях стиля рамки.

💡 Свойство не наследуется.

💡 Значение по умолчанию medium.

💡 Можно анимировать, читайте подробнее про CSS-анимации.

💡 Поддерживается всеми современными браузерами.