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

Свойство CSS border-top-width задаёт ширину (толщину) верхней границы элемента. Оно управляет только верхней стороной, что удобно, когда верхняя граница должна быть толще или тоньше остальных трёх сторон — например, для акцентной полосы над карточкой или разделом.

Задать ширину верхней границы можно двумя способами:

Напрямую, используя полное свойство border-top-width, когда отличается только верхняя сторона.
В составе сокращённого свойства — border или border-width, если нужно задать несколько сторон одновременно.

border-top-width даёт видимый эффект только при наличии стиля границы. По умолчанию стиль границы равен none, то есть граница любой ширины не отображается. Поэтому сначала нужно объявить стиль с помощью border-style или border-top-style, и этот стиль не должен быть none или hidden.

/* Without a style the width is ignored — nothing shows */
.box {
  border-top-width: thick; /* has no effect on its own */
}

/* Add a style and the width becomes visible */
.box {
  border-top-style: solid;
  border-top-width: thick;
}

Смежные полные свойства border-right-width, border-bottom-width и border-left-width работают аналогично для остальных сторон.

Информация

Спецификация не определяет точную толщину каждого ключевого слова. Однако они всегда соблюдают следующий порядок: thin ≤ medium ≤ thick.

Информация

Спецификация не определяет, как соединяются границы разных стилей и ширины на углах.

Начальное значение	medium
Применяется к	Ко всем элементам. Также применяется к ::first-letter.
Наследуется	Нет
Анимируемое	Да. Ширина границы поддаётся анимации.
Версия	CSS1
DOM-синтаксис	object.style.borderTopWidth = "5px";

Синтаксис

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

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

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

Пример свойства CSS border-top-width со значением thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        border-style: dotted;
        border-top-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-width example</h2>
    <p>As you can see the width of the top border is set to thick.</p>
  </body>
</html>

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

Результат

![Свойство CSS border-top-width](https://api.w3docs.com/uploads/media/default/0001/03/ff5db94a745edc3bcb963c80df1284fa352d4278.png "border-top-width set to thick on a dotted paragraph" =420x)

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

Пример свойства CSS border-top-width со значениями medium, thin, thick, initial и inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-top-width example classes */
      .b1 {
        border-top-width: medium;
      }
      .b2 {
        border-top-width: thin;
      }
      .b3 {
        border-top-width: thick;
      }
      .b4 {
        border-top-width: 10px;
      }
      .b5 {
        border-top-width: initial;
      }
      .b6 {
        border-top-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-top-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

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

Значения

Значение	Описание	Попробовать
medium	Задаёт среднюю ширину верхней границы. Является значением по умолчанию.	Попробовать »
thin	Задаёт тонкую верхнюю границу. Точная ширина определяется браузером.	Попробовать »
thick	Задаёт толстую верхнюю границу. Точная ширина определяется браузером.	Попробовать »
length	Задаёт конкретную толщину верхней границы (например, 10px, 5em, 8pt). Процентные значения не поддерживаются.	Попробовать »
initial	Устанавливает свойство в значение по умолчанию.	Попробовать »
inherit	Наследует значение свойства от родительского элемента.

Ключевые слова и длины

Ширину можно задать одним из трёх ключевых слов (thin, medium, thick) или явным значением длины. Ключевые слова удобны, но расплывчаты: спецификация CSS не устанавливает точных пиксельных значений для них, только порядок thin ≤ medium ≤ thick. Большинство браузеров отображают их приблизительно как 1px, 3px и 5px, однако полагаться на это не стоит.

Используйте явное значение длины (1px, 0.25em, 3pt), когда нужна предсказуемая и согласованная толщина во всех браузерах. Обратите внимание, что проценты не разрешены в качестве значений ширины границ, а отрицательные значения длины недопустимы.

На что обратить внимание

Граница не отображается без стиля. Наиболее распространённая ошибка — задать только ширину и забыть про border-top-style. При стиле none по умолчанию граница просто не отрисовывается.
initial и inherit. initial сбрасывает ширину до указанного значения по умолчанию (medium), тогда как inherit копирует вычисленную ширину от родительского элемента.
Ширина влияет на макет. Более широкая граница увеличивает визуальный размер элемента, если только box-sizing не установлен в border-box — тогда объявленные ширина/высота остаются фиксированными, а граница вписывается внутрь.
Углы. Спецификация не определяет, как соединяются границы разной ширины или стиля на углах, поэтому тяжёлая верхняя граница, встречающаяся с тонкой боковой, может выглядеть по-разному в разных браузерах.

Практика

Какие значения допустимы для свойства border-top-width в CSS?