Цвет границы CSS
Цвет границы CSS
Свойство border-colorиспользуется для установки цвета четырех границ.
Цвет можно задать:
- name - укажите название цвета, например "красный"
- HEX - укажите шестнадцатеричное значение, например "#ff0000"
- RGB — укажите значение RGB, например «rgb(255,0,0)».
- HSL — укажите значение HSL, например «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
Определенные боковые цвета
Свойство border-colorможет иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
Пример
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
Шестнадцатеричные значения
Цвет границы также можно указать с помощью шестнадцатеричного значения (HEX):
Пример
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
Значения RGB
Или с помощью значений RGB:
Пример
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
Значения HSL
Вы также можете использовать значения HSL:
Пример
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
Вы можете узнать больше о значениях HEX, RGB и HSL в главах «Цвета CSS» .