border-color: задаем разные цвета для границ элемента.

Свойство «border-color» позволяет задать различные цвета для каждой из 4-х границ элемента (например, кнопки). Допустим, нам необходимо создать кнопку, границы которой будут иметь цвета: красный, зеленый, синий и черный. В свойствах элемента мы можем указать это так:

1
2
3

.my_button{
   border-color: red green blue black;
}

Разумеется, мы можем использовать и шестнадцатеричные обозначение цветов.

Свойство border-color может иметь от 1го до 4-х значений. Если мы указываем только один цвет, то все границы будут иметь одинаковый цвет.

Рассмотрим примеры:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<style>
p.one
{
   border-style:solid;
   border-color:#0000ff;
}
p.two
{
   border-style:solid;
   border-color:#ff0000 #0000ff;
}
p.three
{
   border-style:solid;
   border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
   border-style:solid;
   border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
 
<p class="one">Одно значение</p>
<p class="two">Два значения</p>
<p class="three">Три значения</p>
<p class="four">Четыре значения</p>

Одно значение

Два значения

Три значения

Четыре значения

Обратите внимание: Свойство «border-color» не сработает, если вы не укажите стиль границ или их толщину.

• Как сделать тень с помощью CSS свойства text-shadow.