W3docs
ru
Войти

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

Свойство border-top-color задаёт цвет верхней границы элемента. Все значения свойства с примерами.

Свойство CSS border-top-color задаёт цвет только верхней границы элемента. Используйте его, когда верхний край должен отличаться от трёх остальных сторон — например, цветная акцентная полоса над карточкой или заголовком раздела.

Граница состоит из трёх частей: стиля, ширины и цвета. Свойство border-top-color управляет только цветом. Само по себе оно не даёт видимого результата, поскольку значение border-style по умолчанию равно none, что полностью скрывает границу. Поэтому сначала необходимо объявить стиль верхнего края — с помощью border-style или border-top-style — и только после этого цвет будет что-то рисовать.

Чтобы задать цвет сразу для всех четырёх границ, а не только для верхней, используйте сокращение border-color. Аналогичные свойства для других сторон: border-right-color, border-bottom-color и border-left-color.

Ширина границы по умолчанию равна medium. Изменить её можно с помощью border-width или border-top-width.

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

Синтаксис

Синтаксис свойства CSS border-top-color

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

Пример свойства border-top-color:

Пример свойства CSS border-top-color

<!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 example</h2>
    <div>Example for the border-top-color property with different top border color.</div>
  </body>
</html>
Попробуйте сами »

Результат

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

Пример свойства border-top-color со значением «transparent»:

Пример свойства CSS border-top-color со значением transparent

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        padding-bottom: 8px;
        text-align: center;
        border: 12px groove #1c87c9;
        border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a transparent top border</h2>
  </body>
</html>
Попробуйте сами »
Информация

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

Пример свойства border-top-color с именованным значением цвета:

Пример свойства CSS border-top-color со значением darkred (именованный цвет)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a named color value.</div>
  </body>
</html>
Попробуйте сами »

Пример свойства border-top-color с шестнадцатеричным значением:

Пример свойства CSS border-top-color с шестнадцатеричным значением

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a hexadecimal value.</div>
  </body>
</html>
Попробуйте сами »

Пример свойства border-top-color со значением RGB:

Пример свойства CSS border-top-color со значением RGB

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a RGB value.</div>
  </body>
</html>
Попробуйте сами »

Пример свойства border-top-color со значением HSL:

Пример свойства CSS border-top-color со значением HSL

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a HSL value.</div>
  </body>
</html>
Попробуйте сами »

Значения

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

Важно помнить

  • Одного цвета недостаточно. Поскольку border-style по умолчанию равен none, верхняя граница остаётся невидимой, пока не задан стиль (solid, dashed, groove и т. д.). Всегда используйте border-top-color совместно со стилем границы.
  • currentColor — значение по умолчанию. Если border-top-color не задан, граница использует значение свойства color элемента. Изменение цвета текста также изменит цвет границы, если он не указан явно.
  • transparent сохраняет пространство. Прозрачная верхняя граница сохраняет свою border-top-width, поэтому макет не смещается — это удобно для эффектов при наведении, когда прозрачная граница заменяется видимой.
  • Работают любые форматы цвета. Названия цветов, hex (#1c87c9), rgb(), rgba(), hsl() и hsla() — все форматы допустимы. Используйте rgba()/hsla(), когда нужна частичная прозрачность.

Связанные свойства

Практика

Практика
Для чего используется свойство 'border-top-color' в CSS?
Для чего используется свойство 'border-top-color' в CSS?
Was this page helpful?