Перейти к содержанию

border-width

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

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

Демо

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 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Поочерёдно устанавливается толщину верхней, правой, нижней и левой границы.

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

1
border-width: medium;

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>

Комментарии