W3docs
ru
Войти

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

Use CSS border-top property for defining the width, line style, color of the top border of an HTML element. See property values and styling tricks with examples.

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

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

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

Если width не указан, будет использован размер medium.

Начальное значениеmedium none currentColor
Применяется кКо всем элементам. Также применяется к ::first-letter.
НаследуетсяНет
АнимацияДа. Цвет и ширина границы анимируются.
ВерсияCSS1
Синтаксис DOMobject.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

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

Практика

Практика

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