CSS border-color Свойство
Пример
Задайте цвет для границы:
div {border-color: coral;}
Подробнее примеры ниже.
Определение и использование
Свойство border-color
задает цвет четырех границ элемента. Это свойство может иметь от одного до четырех значений.
Если свойство border-color имеет четыре значения:
- border-color: red green blue pink;
- top border is red
- right border is green
- bottom border is blue
- left border is pink
Если свойство Color границы имеет три значения:
- border-color: red green blue;
- top border is red
- right and left borders are green
- bottom border is blue
Если свойство border-color имеет два значения:
- border-color: red green;
- top and bottom borders are red
- right and left borders are green
Если свойство border-color имеет одно значение:
- border-color: red;
- all four borders are red
Примечание: Всегда объявляйте свойство border-style перед border-color
свойством. Элемент должен иметь границы, прежде чем можно изменить цвет.
Значение по умолчанию: | Текущий цвет элемента |
---|---|
Inherited: | no |
Animatable: | yes. Читайте о animatable |
Version: | 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) |
Другие примеры
Пример
Задайте цвет для границы с шестнадцатеричным значением:
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);}
Похожие страницы
CSS Справочник: CSS Border
HTML DOM Справочник: borderColor Свойство