border-width¶

Свойство border-width задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.

Способ изменения толщины зависит от числа значений.

Демо¶

Фон

Синтаксис¶

/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> values */
border-width: 4px;
border-width: 1.2rem;

/* vertical | horizontal */
border-width: 2px 1.5em;

/* top | horizontal | bottom */
border-width: 1px 2em 1.5cm;

/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* Global keywords */
border-width: inherit;
border-width: initial;
border-width: unset;

Значения¶

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы. Для более точного значения толщину можно указывать в пикселях или других единицах.

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

Табл. 1. Зависимость результата от числа значений
Число значений	Результат
1	Толщина границы будет установлена для всех сторон элемента.
2	Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой.
3	Первое значение задаёт толщину верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочерёдно устанавливается толщину верхней, правой, нижней и левой границы.

Значение по-умолчанию:

border-width: medium;

Применяется ко всем элементам

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

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-width</title>
    <style>
      p {
        border-style: double; /* Стиль рамки вокруг параграфа */
        border-width: 3px 7px 7px 4px; /* Толщина границы */
        padding: 7px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <p>
      Кластерное вибрато представляет собой хроматический
      алеаторически выстроенный бесконечный канон с
      полизеркальной векторно-голосовой структурой.
    </p>
  </body>
</html>