W3docs
ru
Войти

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

CSS border-width is a shorthand property which allows you to set widths of four sides of the element’s border. See examples and try it for yourself.

Свойство CSS border-width устанавливает ширину границы элемента. Оно применяется ко всем четырем сторонам одновременно. Вы также можете задать ширину для каждой стороны отдельно, используя следующие расширенные свойства:

  • border-top-width, определяющий ширину верхней границы элемента.
  • border-left-width, определяющий ширину левой границы элемента.
  • border-right-width, определяющий ширину правой границы элемента.
  • border-bottom-width, определяющий ширину нижней границы элемента.

info

Свойство border-style по умолчанию имеет значение none. Если вы не укажете стиль границы, её ширина не будет видна.

Это свойство принимает от одного до четырех значений. Одно значение применяется ко всем четырем сторонам. Два значения применяются к верхним/нижним и левым/правым сторонам соответственно. Три значения применяются к верхней, левой/правой и нижней сторонам. Четыре значения применяются к верхней, правой, нижней и левой сторонам по порядку.

Начальное значениеmedium
НаследуетсяНет
АнимацияДа. Ширина границы может анимироваться.
ВерсияCSS1
JavaScript-синтаксисobject.style.borderWidth = "1px 5px";

Синтаксис

Синтаксис свойства CSS border-width

border-width: <line-width>{1,4} | initial | inherit;

Пример свойства border-width:

Пример свойства CSS border-width

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>This paragraph's border width is set to 1px.</p>
  </body>
</html>
Попробуйте сами »

Пример свойства border-width с тремя значениями:

Пример свойства CSS border-width со значениями px и medium

<!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">This paragraph's border width is set to 1px.</p>
    <p class="medium">This paragraph's border width is set to medium.</p>
    <p class="thick">This paragraph's border width is set to 10px.</p>
  </body>
</html>
Попробуйте сами »

Результат

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

Значения

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

Практика

Практика

Какие из следующих значений можно использовать для указания ширины границ CSS?