Определение border-color
CSS свойство border-color определяет цвет четырех границ элемента. Это свойство может иметь от одного до четырех значений.
Если свойство border-color имеет четыре значения:
- border-color: red green blue pink;
- верхняя граница красная
- правая граница зеленая
- нижняя граница синяя
- левая граница розовая
Если свойство border-color имеет три значения:
- border-color: red green blue;
- верхняя граница красная
- правая и левая границы зеленые
- нижняя граница синяя
Если свойство border-color имеет два значения:
- border-color: red green;
- верхняя и нижняя границы - красные
- правая и левая границы - зеленые
Если свойство border-color имеет одно значение:
- border-color: red;
- все четыре границы красные
Примечание: Всегда объявляйте CSS войство border-style перед свойством border-color. У элемента должны быть границы, прежде чем вы сможете изменить цвет.
| Значение по умолчанию: | Текущий цвет элемента |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.borderColor="#FF0000 blue" Попробуй |
Поддержка border-color
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Синтаксис border-color
border-color: color|transparent|initial|inherit;
Значения border-color
| Значение | Описание | Демонстрация |
|---|---|---|
| color | Определяет цвет границы. Посмотрите на CSS Значения цвета для получения полного списка возможных значений цвета. Цвет по умолчанию - текущий цвет элемента | Демо ❯ |
| transparent | Определяет, что цвет границы должен быть прозрачным | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-color
Установите цвет границы с помощью HEX значения:
div {border-color: #92a8d1;}
Попробуйте сами »
Установите цвет границы с помощью RGB значения:
div {border-color: rgb(201, 76, 76);}
Попробуйте сами »
Установите цвет границы с помощью RGBA значения:
div {border-color: rgba(201, 76, 76, 0.3);}
Попробуйте сами »
Установите цвет границы с помощью HSL значения:
div {border-color: hsl(89, 43%, 51%);}
Попробуйте сами »
Установите цвет границы с помощью HSLA значения:
div {border-color: hsla(89, 43%, 51%, 0.3);}
Попробуйте сами »
Установите другой цвет границы для каждой стороны элемента:
div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color:
#ff0000 #00ff00 #0000ff rgb(250,0,255);}
Попробуйте сами »
Страницы по теме border-color
CSS Учебник: CSS Границы
HTML DOM справочник: borderColor свойство