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