Кратко
СкопированоСвойство border управляет цветом рамки элемента.
Пример
СкопированоДля того чтобы увидеть работу свойства, необходимо помимо цвета рамки добавить ещё и значение свойства border.
<p>Блок текста, обведённый рамкой</p>
<p>Блок текста, обведённый рамкой</p>
p { border-style: solid; border-color: #2E9AFF;}
p {
border-style: solid;
border-color: #2E9AFF;
}
Как пишется
СкопированоМожно писать одно, два, три или четыре значения, разделяя их пробелами. В зависимости от этого получится разный результат:
border— одно значение, цвет рамки со всех сторон одинаковый.- color : # 2 E9 A F F border— два значения, первое устанавливает цвет рамки сверху и снизу, второе — слева и справа.- color : # 2 E9 A F F # F498 A D border— три значения, первое значение устанавливает цвет рамки сверху, второе — слева и справа, а третье — снизу.- color : # 2 E9 A F F # F498 A D # F F8630 border— четыре значения, устанавливает для каждой стороны свой цвет, поочерёдно: для верхней, правой, нижней и левой рамки.- color : # 2 E9 A F F # F498 A D # F F8630 # 41 E847
Разрешается любое доступное обозначение цвета в вебе, а также ключевые слова 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;
}