Свойство CSS border-color
CSS border-color — сокращённое свойство, задающее цвет четырёх сторон рамки элемента. Значения, примеры и синтаксис.
Свойство CSS border-color задаёт цвет рамки элемента. Это сокращённое свойство, позволяющее установить цвет всех четырёх сторон одновременно или назначить каждой стороне собственный цвет. Оно соответствует четырём отдельным свойствам:
На этой странице рассматривается синтаксис, формы записи от одного до четырёх значений, поддерживаемые форматы цвета, а также причины, по которым цвет рамки может незаметно не отображаться.
Когда цвет отображается
border-color окрашивает рамку только в том случае, если рамка фактически существует. Цвет используется совместно со свойствами border-style и border-width. Рамка остаётся невидимой, если:
border-styleравноnoneилиhidden(по умолчаниюnone), илиborder-widthравно0.
Иными словами, установка только border-color ничего не даёт — всегда нужен стиль. Чаще всего все три свойства задают сразу с помощью сокращённого свойства border.
Это свойство принимает любое значение цвета CSS. По умолчанию используется currentColor, то есть рамка наследует значение свойства color элемента, если его не переопределить.
Формы записи от одного до четырёх значений
border-color следует стандартному шаблону CSS для сокращённых свойств сторон: количество переданных значений определяет, к каким сторонам они применяются:
| Значения | top | right | bottom | left |
|---|---|---|---|---|
red | red | red | red | red |
red green | red | green | red | green |
red green blue | red | green | blue | green |
red green blue gold | red | green | blue | gold |
Удобный способ запомнить порядок четырёх значений — «по часовой стрелке сверху»: top, right, bottom, left.
Сводка по свойству
| Начальное значение | currentColor |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Рамки блока можно анимировать. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.borderColor = "red"; |
Синтаксис
Синтаксис свойства CSS border-color
border-color: color | transparent | initial | inherit;Примеры
Один цвет для всех сторон
Если передать одно значение, оно задаёт цвет всех четырёх сторон элемента.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.dotted {
border-style: dotted;
border-color: #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<div class="dotted">Example with blue dotted border.</div>
</body>
</html>Результат
Разные цвета для каждой стороны
Здесь применяются четыре значения: первое — к верхней рамке, второе — к правой, третье — к нижней, четвёртое — к левой.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
border-style: solid;
border-color: #1c87c9 cyan yellow #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<div class="solid">Example with border-color property.</div>
</body>
</html>Использование разных форматов цвета
В качестве значения border-color можно задать шестнадцатеричный цвет, RGB, RGBA, HSL, HSLA или именованный цвет. В примере ниже используется по одному значению каждого типа.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-color: lightblue;
}
.hex {
border-color: #1c87c9;
}
.rgb {
border-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Border with a named color.</p>
<p class="hex">Border with a hexadecimal value.</p>
<p class="rgb">Border with a RGB color value.</p>
<p class="hsl">Border with a HSL color value.</p>
</body>
</html>Подробнее о форматах цвета, поддерживаемых CSS, читайте в разделе HTML Colors.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| color | Задаёт цвет рамок. По умолчанию используется текущий цвет элемента. Можно использовать имена цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). Необязательный. По умолчанию currentColor. | Попробовать » |
| transparent | Делает цвет рамки прозрачным. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |