Цвет границы CSS
Свойство border-color задаёт цвет четырёх границ.
Цвет можно указать как имя (например, red), значение HEX (например, #ff0000), значение RGB (например, rgb(255,0,0)), значение HSL (например, hsl(0, 100%, 50%)) или transparent.
Примечание: Если border-color не задан, граница использует цвет текста элемента.
Пример
У каждого абзаца граница разного именованного цвета.
<style> создайте три класса абзаца с рамкой: сплошная красная, сплошная зелёная и пунктирная синяя. У каждого также должен быть задан border-style. Добавьте по абзацу для каждого.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<p class="one">Red border</p>
<p class="two">Green border</p>
<p class="three">Blue border</p>
</body>
</html>
Цвета для отдельных сторон
Свойство border-color может принимать от одного до четырёх значений — для верхней, правой, нижней и левой границ.
Пример
Четыре значения задают каждой стороне свой цвет.
<style> создайте абзац со сплошной границей и border-color "red green blue yellow" (красный сверху, зелёный справа, синий снизу, жёлтый слева). Добавьте абзац, использующий его.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
</head>
<body>
<p class="one">Red top, green right, blue bottom, yellow left.</p>
</body>
</html>
Значения HEX
Цвет границы также можно задать шестнадцатеричным (HEX) значением.
Пример
Цвет границы задан значением HEX #ff0000.
<style> создайте абзац со сплошной границей и border-color #ff0000 (красный). Добавьте абзац, использующий его.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with a HEX value.</p>
</body>
</html>
Значения RGB
Цвет границы также можно задать значением RGB.
Пример
Цвет границы задан значением rgb(255, 0, 0).
<style> создайте абзац со сплошной границей и border-color rgb(255, 0, 0) (красный). Добавьте абзац, использующий его.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with an RGB value.</p>
</body>
</html>
Значения HSL
Цвет границы также можно задать значением HSL.
Подробнее о HEX, RGB и HSL вы узнаете в главах о цветах CSS.
Пример
Цвет границы задан значением hsl(0, 100%, 50%).
<style> создайте абзац со сплошной границей и border-color hsl(0, 100%, 50%) (красный). Добавьте абзац, использующий его.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
</style>
</head>
<body>
<p class="one">Border color set with an HSL value.</p>
</body>
</html>