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

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

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

Чтобы применить border-top-width, необходимо сначала задать стиль границы с помощью border-style или border-top-style. Свойство действует только в том случае, если стиль границы не равен none или hidden.

INFO

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

INFO

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

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

Синтаксис

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

css

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

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

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

html

<!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>

Try it Yourself »

Результат

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

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

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

html

<!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>

Try it Yourself »

Значения

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

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

Синтаксис ​

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

Результат ​

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

Значения ​

Практика ​

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

Синтаксис

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

Результат

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

Значения

Практика