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

Свойство CSS border-top задаёт ширину, стиль и цвет верхней границы элемента в одном объявлении. Это сокращённое свойство, объединяющее три полных свойства: border-top-width, border-top-style и border-top-color.

На этой странице описаны синтаксис свойства, значение каждого параметра, правила обработки пропущенных значений и практические примеры, которые можно запустить.

Когда использовать

Используйте border-top, когда нужна граница только у верхнего края элемента — например, разделитель над подвалом страницы, акцентная линия в верхней части карточки или черта между элементами списка. Если одинаковая граница нужна со всех четырёх сторон, используйте сокращение border; для полного пообочного контроля применяйте border-top, border-right, border-bottom и border-left совместно.

Указание значений

Три значения можно указывать в любом порядке, при этом одно или два из них можно опустить. Пропущенное значение вернётся к начальному:

Стиль обязателен для отображения границы. Начальное значение border-top-style равно none, поэтому если стиль опущен, граница не отображается — даже если заданы ширина и цвет.
Если цвет опущен, граница использует значение свойства color элемента (currentColor). Если color не задан, он наследуется или по умолчанию становится чёрным.
Если ширина опущена, она возвращается к значению medium (примерно 3px в большинстве браузеров).

Начальное значение	medium none currentColor
Применяется к	Всем элементам. Также применяется к ::first-letter.
Наследуется	Нет
Анимируемое	Да. Цвет и ширина границы поддерживают анимацию.
Версия	CSS1
DOM Синтаксис	object.style.borderTop = "1px solid black";

Синтаксис

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

border-top: border-width border-style border-color | initial | inherit;

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-top: 3px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top example</h2>
    <div> This is a simple example for the border-top property.</div>
  </body>
</html>

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

Результат

![CSS свойство border-top](/uploads/media/default/0001/03/2f035228f6c0a9e922d16e119bd24dba1d27241b.png "CSS border-top Property" =420x)

Пример свойства border-top, применённого к различным элементам:

Пример CSS свойства border-top со значениями dotted, solid и double

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      p,
      div {
        padding: 10px;
      }
      h1 {
        border-top: 5px solid #8ebf42;
      }
      p {
        border-top: 4px dotted #1c87c9;
      }
      div {
        border-top: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>A heading with a solid green top border</h1>
    <p>A heading with a dotted blue top border.</p>
    <div>A div element with a thick double top border.</div>
  </body>
</html>

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

Можно создать блок с помощью элемента <div>, задать ему background-color и определить верхнюю границу.

Пример использования border-top для создания блока с границей ridge:

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-top: 20px ridge #8ebf42;
        background-color: #ccc;
        height: 100px;
        width: 200px;
        font-weight: bold;
        text-align: center;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This box has a ridge border on the top.</p>
    </div>
  </body>
</html>

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

Частые ошибки

Ничего не отображается? Самая распространённая ошибка — пропущенный стиль. border-top: 2px #1c87c9; ничего не выведет, так как стиль по умолчанию равен none. Добавьте ключевое слово стиля, например solid: border-top: 2px solid #1c87c9;.
Границы увеличивают размер элемента. Верхняя граница увеличивает высоту отображаемого элемента, если box-sizing не установлен в border-box. Учитывайте это при выравнивании элементов с границей и без неё.
Ключевые слова для ширины. Помимо явных значений длины вроде 3px, ширина принимает ключевые слова thin, medium и thick. Их точные значения в пикселях определяются браузером.

Значения

border-top сам по себе не принимает именованные ключевые слова для частей границы напрямую — вместо этого он принимает значения трёх составных свойств, а также глобальные ключевые слова initial и inherit:

Значение	Описание
border-top-width	Задаёт ширину верхней границы элемента. Значение по умолчанию — "medium". Обязательное значение.
border-top-style	Задаёт стиль линии верхней границы элемента. Значение по умолчанию — "none". Обязательное значение.
border-top-color	Задаёт цвет верхней границы элемента. Значение по умолчанию — текущий цвет текста.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какой синтаксис правильный для CSS свойства 'border-top'?

border-top: 10px solid red;border.top: 10px solid red;borderTop: 10px solid red;border-top = 10px solid red;