СSS Свойство border-color
Определение и использование
Свойство 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;
- все четыре границы красные
Примечание: Всегда объявляйте свойство border-style перед свойством border-color. Элемент должен иметь границы, прежде чем вы сможете изменить цвет.
| Значение по умолчанию: | Текущий цвет элемента |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да. Прочитать о animatable Попробовать |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.borderColor="#FF0000 blue" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS Синтаксис
border-color: color|transparent|initial|inherit;
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| color | Задает цвет фона. Смотреть CSS Значение цвета для получения полного списка возможных значений цвета. Цвет по умолчанию черный | Воспроизвести » |
| transparent | Указывает, что цвет границы должен быть прозрачным | Воспроизвести » |
| initial | Задает для этого свойства значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Установить цвет для границы с значением 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);}
Попробуйте сами »
Связанные страницы
CSS учебник: CSS Border
HTML DOM справочник: Свойство borderColor
