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

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

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

Значение по умолчанию medium none currentColor
Применяется All elements. It also applies to ::first-letter..
Наследуется No
Анимируемое Yes. The width and color of the border are animatable.
Версия 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 Значение элемента наследуется от родительского элемента.

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

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

Browser support

1+ 4+ 1+ 3.5+ 1+



Related articles