Перейти к содержанию

border-color

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

Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Демо

Каждую сторону можно установить по отдельности, используя border-top-color, border-right-color, border-bottom-color и border-left-color; или с использованием режима записи border-block-start-color, border-block-end-color, border-inline-start-color и border-inline-end-color.

Это свойство является сокращением для следующих свойств CSS:

  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color
Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* <color> values */
border-color: red;

/* top and bottom | left and right */
border-color: red #f015ca;

/* top | left and right | bottom */
border-color: red rgb(240, 30, 50, 0.7) green;

/* top | right | bottom | left */
border-color: red yellow green blue;

/* Global values */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;

Значения

<цвет>

Цвет

transparent

Устанавливает прозрачный цвет.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.

Табл. 1. Изменение цвета в зависимости от числа значений
Число значенийРезультат
1Цвет границы будет установлен для всех сторон элемента.
2Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3Первое значение задаёт цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Значение по-умолчанию: Значение свойства color

Применяется ко всем элементам

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>border-color</title>
        <style>
            h1 {
                border-color: red white; /* Цвет границы */
                border-style: solid; /* Стиль границы */
            }
            p {
                border-color: #008a77; /* Цвет границы */
                border-style: solid; /* Стиль границы */
                padding: 5px; /* Поля вокруг текста */
            }
        </style>
    </head>
    <body>
        <h1>Шоу-бизнес как внутридискретное арпеджио</h1>
        <p>
            Септаккорд, согласно традиционным
            представлениям, иллюстрирует однокомпонентный
            шоу-бизнес.
        </p>
    </body>
</html>

Комментарии