Свойство border-color
CSS свойство border-color определяет цвет четырех границ.
Цвет может быть установлен с помощью:
- Название - укажите название цвета, например "red"
- HEX - укажите значение HEX, например "#ff0000"
- RGB - укажите значение RGB, например "rgb(255,0,0)"
- HSL - укажите значение RGB, например "hsl(0, 100%, 50%)"
- Прозрачный
Примечание: Если border-color не устанавливается, у него отсутствует элемент цвета.
Демонстрация различных цветных границ:
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
Результат:
Red border
Green border
Blue border
CSS Определенный цвет границ
CSS свойство border-color может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы):
p.one {
border-style: solid;
border-color: red green blue yellow;
/* красный сверху, зеленый справа, синий снизу и желтый слева */
}
Попробуйте сами »
CSS Цвет HEX
Цвет границы также можно задать с помощью шестнадцатеричного значения (HEX):
p.one {
border-style: solid;
border-color: #ff0000; /* красный
*/
}
Попробуйте сами »
CSS Цвет RGB
Или с помощью значений RGB:
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* красный */
}
Попробуйте сами »
CSS Цвет HSL
Вы также можете использовать значения HSL:
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* красный */
}
Попробуйте сами »
Вы можете узнать больше о значениях HEX, RGB и HSL в нашем разделе главы CSS Цвета.