Кратко
СкопированоСвойство border
управляет цветом рамки элемента.
Пример
СкопированоДля того чтобы увидеть работу свойства, необходимо помимо цвета рамки добавить ещё и значение свойства border
.
<p class="text">Блок текста, обведённый рамкой</p>
<p class="text">Блок текста, обведённый рамкой</p>
.text { border-style: solid; border-color: tomato;}
.text { border-style: solid; border-color: tomato; }
Как пишется
СкопированоМожно писать одно, два, три или четыре значения, разделяя их пробелами. В зависимости от этого получится разный результат:
border
— одно значение, цвет рамки со всех сторон одинаковый.- color : tomato border
— два значения, первое устанавливает цвет рамки сверху и снизу, второе — слева и справа.- color : tomato skyblue border
— три значения, первое значение устанавливает цвет рамки сверху, второе — слева и справа, а третье — снизу.- color : tomato skyblue olive border
— четыре значения, устанавливает для каждой стороны свой цвет, поочерёдно: для верхней, правой, нижней и левой рамки.- color : tomato skyblue olive silver
Разрешается использование названий цветов, форматов HEX, RGB, HSL, а также ключевых слов transparent
(для прозрачной рамки) или inherit
(для наследования значения родителя).
Подсказки
Скопировано💡 Свойство не наследуется.
💡 Значение по умолчанию соответствует значению color
у элемента.
💡 Можно анимировать, читайте подробнее про CSS
.
💡 Поддерживается всеми современными браузерами.
На практике
Скопированосоветует Скопировано
🛠 Чаще всего это свойство используется в шорткате border
, а отдельно пишется, если все свойства рамки сохраняются, а цвет нужно изменить, например по событию :hover
или :focus
. Или когда вы используете методологию БЭМ, и все свойства рамки прописаны у элемента, а цвет рамки — у модификатора. Вот пример:
<div class="block"> <p class="block__element">Текст</p> <p class="block__element block__element--modify">Текст с модификатором</p></div>
<div class="block"> <p class="block__element">Текст</p> <p class="block__element block__element--modify">Текст с модификатором</p> </div>
.block__element { border-width: 1px; border-style: solid;}.block__element--modify { border-color: tomato;}
.block__element { border-width: 1px; border-style: solid; } .block__element--modify { border-color: tomato; }