March 29, 2024

Цвет границы CSS

Свойство border-color используется для установки цвета четырех границ.

Цвет может быть установлен:

  • имя - укажите название цвета, например "красный"
  • HEX - укажите значение HEX, например "#ff0000"
  • RGB - укажите значение RGB, например "rgb(255,0,0)"
  • HSL - укажите значение HSL, например "hsl(0, 100%, 50%)"
  • Прозрачный

Примечание: Если цвет границы не задан, он наследует цвет элемента.

Пример

Демонстрация различных цветов границ:

p.one { border-style: solid; border-color: red; }

p.two { border-style: solid; border-color: green; }

p.three { border-style: dotted; border-color: blue; }

Конкретные Цвета Сторон

Свойство border-color может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).

Пример

p.one { border-style: solid; border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */ }

Значения HEX

Цвет границы также можно указать с помощью шестнадцатеричного значения (HEX):

Пример

p.one { border-style: solid; border-color: #ff0000; /* red */ }

Значения RGB

Или с помощью значений RGB:

Пример

p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}