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>Пример 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 | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ |
Практикуйте свои знания
