Возможно использовать одно, два, три или четыре значения. Полученный результат будет зависеть от количества примененных значений.
Если будет применено:
одно значение - цвет будет применен для всех сторон рамки
два значения - первое будет применено для верхней и нижней стороны рамки, второе для правой и левой стороны рамки
три значения - первое будет применено для верхней стороны рамки, второе для правой и левой стороны рамки, третье для нижней стороны рамки
четыре значения - в данном случае к рамке применяется последовательное применение цветов в таком порядке: к верхней, к правой, к нижней и к левой
Пример кода:
- Код: выделить все
<html>
<head>
<meta charset="utf-8">
<title>Свойство border-color</title>
<style>
h1 {
border-color: green white; /* Цвет границы, первое значение для верхней и нижней, второе для левой и правой */
border-style: solid; /* Стиль границы */
}
p {
border-color: #997b33; /* Цвет границы */
border-style: solid; /* Стиль границы */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<h1>ПРИВЕТ CSS</h1>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
</body>
</html>
Что в итоге получится: