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

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

Толщина верхней границы, а также все другие границы, могут быть установлены сокращенным свойством border или border-width:

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

Можно использовать border-top-style или border-style для установления стиля границы.

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

Данная спецификация не устанавливает как соединяются в углах границы, имеющие разные стили и толщины.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      padding: 8px;             
      border-style: dotted;
      border-top-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-top-width</h2>
    <p>Установлена толщина thick для верхней границы.</p>
  </body>
</html>

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

Другой пример, где использованы все значения свойств:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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>
    <h2>Пример значения border-top-width</h2>
    <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 lenght
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
    </div>
    </main>
  </body>
</html>

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

Значения

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