Как сделать цвет рамки в html

Как изменить цвет рамки вокруг изображения-ссылки?

Рамка вокруг изображения появляется в том случае, когда к тегу добавляется атрибут border с ненулевым значением и при создании изображения-ссылки. При этом тег хранится внутри контейнера . Независимо от ситуации цвет рамки устанавливается автоматически, однако через стили можно задать любой желаемый цвет границы.

По умолчанию цвет рамки вокруг изображений-ссылок совпадает с цветом текстовых ссылок. В стилях достаточно использовать свойство border , добавляя его к конструкции a img , которая сообщает, что рамку следует отображать только у изображений, находящихся внутри контейнера (пример 1).

Пример 1. Цвет рамки

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Изображение-ссылка

Результат данного примера показан на рис. 1. Чтобы цвет рамки менялся при посещении ссылки, в примере используется псевдокласс :visited .

Цвет рамки вокруг непосещенной и посещенной ссылки

Рис. 1. Цвет рамки вокруг непосещенной и посещенной ссылки

border — color

Какого цвета будет рамка вокруг элемента? Решать вам!

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 28 августа 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство border — color управляет цветом рамки элемента.

Пример

Скопировать ссылку «Пример» Скопировано

Для того чтобы увидеть работу свойства, необходимо помимо цвета рамки добавить ещё и значение свойства border — style .

 Блок текста, обведённый рамкой 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>

 .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; >

border-color

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

border-color: red green blue pink;

Верхняя рамка — красная
Правая рамка — зеленая
Нижняя рамка — синяя
Левая рамка — розовая

Все 4 рамки — красные

Примечание: свойство border-color используется только в паре с border-style, так как без него, оно не даст никакого эффекта.

Значение по умолчанию:	совпадает с цветом текста
Применяется:	ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется:	да
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.borderColor=»#FF0000 blue»

Синтаксис

border-color: цвет|transparent|inherit;

Значения свойства

Значение	Описание
цвет	Цвет рамки, который можно установить различными способами, например: указать название цвета, использовать шестнадцатеричные значения (HEX) или с помощью синтаксиса RGB.
transparent	Указывает, что цвет рамки должен быть прозрачным.
inherit	Указывает, что значение наследуется от родительского элемента.

border-color

Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Синтаксис

border-color: [цвет | transparent] | inherit

Значения

transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя.

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

Табл. 1. Изменение цвета в зависимости от числа значений

Число значений	Результат
1	Цвет границы будет установлен для всех сторон элемента.
2	Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3	Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

    border-color   Lorem ipsum dolor sit amet
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат данного примера показан на рис. 1.

Использование свойства border-color

Рис. 1. Использование свойства border-color

Объектная модель

[window.]document.getElementById(» elementID «).style.borderColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent . Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit .

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove , ridge , inset или outset .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.