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 Значение элемента наследуется от родительского элемента.

Схожие ссылки

Border, border-width, border-style, border-top, border-top-style.

Browser support

1+ 4+ 1+ 1+ 3.5+



Related articles