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

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

Эти три значения сокращенного свойства могут быть установлены в любом порядке, или же одно или две значения могут быть пропущены. Если цвет не установлен, значение будет выбрано из свойства color. Если свойство color не установлено, будет выбран черный цвет по умолчанию. Если свойство width не установлено, будет выбран средний размер элемента.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      border-top: 3px solid #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2> Пример border-top</h2>
    <div> Пример свойства border-top.</div>
  </body>
</html>

Свойство border-top может быть применен к разным элементам.

Пример

<!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>Заголовок с верхней границей solid green</h1>
    <p>Заголовок с верхней границей  dotted blue.</p>
    <div>div элемент с верхней границей thick double.</div>
  </body>
</html>

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

Пример

<!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>Блок сверху имеет границу ridge.</p>
    </div>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
1+ 1+ 3.5+ 1+

Практикуйте свои знания

What does the CSS property 'border-top' do?
Считаете ли это полезным?