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

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

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

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

Что такое CSS свойство 'border-top-color'?
Считаете ли это полезным?