CSS свойство border-width

CSS свойство border-width устанавливает толщину всех границ элемента.

Свойство имеет четыре значения. При использовании только одного из них border-width применяется для всех сторон элемента (top, right, bottom, left ). Это сокращенное свойство, которое устанавливает border-top-width, border-left-width, border-right-width, border-bottom-width.

При использовании двух значений первое из них применяется для верхней и нижней стороны элемента. А второе значение применяется для левой и правой стороны элемента. При использовании трех значений первое значение применяется для верхней стороны. Второе значение применяется для правой и левой стороны. Третье значение применяется для нижней стороны элемента.

При использовании четырех значений первое из них применяется для верхней стороны элемента, а второе для правой стороны Третье значение применяется для нижней стороны элемента и четвертое для левой стороны элемента.

Сначала необходимо установить свойство border-style, а потом border-width. Элемент должен иметь границы, чтобы суметь определить толщину

Значение по умолчанию	medium
Наследуется	Нет
Анимируемое	Да. Толщина границы анимируема.
Версия	CSS1
DOM синтаксис	object.style.borderWidth = "1px 5px";

Синтаксис

border-width: medium | thin | thick | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      border-style: solid;
      border-width: 1px;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Толщина границы данного параграфа установлена 1px.</p>
  </body>
</html>

Попробуйте сами!

Рассмотрим второй пример, который содержит три значения:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      color: #666;
      padding: 5px;      
      border-style: solid; 
      } 
      .thin {
      border-width: 1px;
      }
      .medium{
      border-width: medium;
      }
      .thick {
      border-width: 10px;
      }
    </style>
  </head>
  <body>
    <p class="thin">Толщина границы данного параграфа установлена 1px.</p>
    <p class="medium">Толщина границы данного параграфа установлена medium.</p>
    <p class="thick">Толщина границы данного параграфа установлена 10px.</p>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
medium	Устанавливает границы с толщиной medium. Является значением по умолчанию.
thin	Устанавливает границу с толщиной thin.
thick	Устанавливает границу с толщиной thick.
length	Устанавливает длину границы.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.