Цвет границ: border-color

border-color

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 4.0 3.5 1.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.0 1.0 7.0 11 1.0
Свойство
border-color — это общее свойство для цвета границ
Описание
Для того чтобы не задавать каждый цвет границы по отдельности существует возможность задать сразу все цвета для границ. В качестве значения свойство border-color может принимать от одного до четырех значений.


запись border-color: gold; равноценна записи border-top-color: gold; border-right-color: gold; border-bottom-color: gold; border-left-color: gold;
border-color-one
Цифра 1 означает что одно значение, указанное в свойстве border-color, применяется ко всем четырем сторонам


запись border-color: gold crimson; равноценна записи border-top-color: gold; border-bottom-color: gold; border-left-color: crimson; border-right-color: crimson;
border-color-two
Цифра 1 соответствует первому значению в свойстве border-color, а цифра 2 — второму значению


запись border-color: gold crimson orangered; равноценна записи border-top-color: gold; border-right-color: crimson; border-left-color: crimson; border-bottom-color: orangered;
border-color-three
Цифра 1 соответствует первому значению в свойстве border-color, цифра 2 — второму значению, а цифра 3 — третьему значению


запись border-color : gold crimson orangered orchid; равноценна записи border-top-color: gold; border-right-color: crimson; border-bottom-color: orangered; border-left-color: orchid;
border-color-four
Цифра 1 соответствует первому значению в свойстве border-color, цифра 2 — второму значению, цифра 3 — третьему значению, а цифра 4 — четвертому значению

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
border-top-color | border-right-color | border-bottom-color | border-left-color
Значение по умолчанию
Цвет текста — для каждого значения
Правила записи
свойство: значение; или
свойство: значение значение; или
свойство: значение значение значение; или
свойство: значение значение значение значение;
Примеры

<p>

У этого абзаца цвет границ gold

</p>

<p>

Этот абзац имеет цвет верхней и нижней границы — gold, а цвет левой и правой границы — #DC143C

</p>

<p>

Этот абзац имеет цвет верхней границы — gold, цвет левой и правой границ — #DC143C, цвет нижней границы — rgb(0, 128, 0)

</p>

<p>

Этот абзац имеет цвет верхней границы — gold, цвет правой границы — #DC143C, цвет нижней границы — rgb(255, 69, 0), цвет левой границы — hsl(302, 59%, 65%)

</p>

<p>

Этот абзац имеет цвет верхней границы — rgb(255, 69, 0), цвет правой границы — hsl(302, 59%, 65%), цвет нижней границы — rgba(255, 69, 0, 0.5), цвет левой границы — hsla(302, 59%, 65%, 0.5)

</p>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться