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

CSS свойство border-top-color устанавливает цвет верхней границы элемента.

Цвет верхней границы, вместе с цветами верхней, правой и нижней границы, может быть установлен собирательным свойством border color. При использовании свойства border-top-color необходимо сначала установить свойство border-style или border-top-style и дальше изменить цвет установленного стиля.

Толщина границы по умолчанию - medium. Толщину можно установить используя свойство border-width или border-top-width

Значение по умолчанию currentColor
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет.
Анимируемое Да. Цвет верхней границы анимируем.
Версия CSS1
DOM синтаксис object.style.borderTopColor = "black";

Синтаксис

border-top-color: color | transparent | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      width: 300px;
      padding: 20px;
      border-style: solid;
      border-color: #666;
      border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2> Пример border-top-color</h2>
    <div>Пример свойства border-top-color с разными цветами верхней границы.</div>
  </body>
</html>

Рассмотрим другой пример, где установлено значение transparent для верхней границы:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      h2 {
      padding-bottom: 8px; 
      text-align: center;   
      border: 12px groove #1c87c9;
      border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок с transparent top border</h2>
  </body>
</html>

Hexadecimal, RGB, RGBA, HSL, HSLA или название цвета может быть применен как значение для свойства border-top-color.

Пример CSS border-top-color, где значением является название цвета:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Свойство border-top-color  с значением названия цвета.</div>
  </body>
</html>

Пример, где установлено значение hexadecimal для свойства border-top-color:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Свойство border-top-color с значением  hexadecimal.</div>
  </body>
</html>

Пример с border-top-color, где используется значение RGB:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Свойство border-top-color с  RGB значением.</div>
  </body>
</html>

Пример с border-top-color, где используется значение HSL:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div> Свойство border-top-color с HSL значением.</div>
  </body>
</html>

Значения

Значение Описание
color Устанавливает цвет верхней границы. Цвет по умолчанию - цвет текущего элемента. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). Необходимое значение.
transparent Устанавливает прозрачный цвет верхней границы. Верхняя граница может занять место, установленное значением border-width.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

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

Browser support

1+ 4+ 1+ 1+ 3.5+



Related articles