Атрибут bordercolor
Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трёхмерная, добавление атрибутов bordercolor и border к элементу создаёт однотонную линию.
Данный атрибут устарел, взамен используйте стили.
Синтаксис
Значения
Значение по умолчанию
Зависит от браузера и операционной системы.
Пример
| . |
Примечание
Для изменения цвета рамки таблицы используйте стилевое свойство border, как показано в примере.
| . |
Браузеры
| 3 | 12 | 1 | 3.5 | 1 | 1 |
| 4.4 | 4 | 6 | 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 . В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов (пример 1).
Пример 1. Добавление рамки
В данном примере к двум изображениям добавляется класс border , через который устанавливается зелёная рамка (рис. 1).
Рис. 1. Рамка вокруг фотографий
Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover . Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.
Пример 2. Рамка вокруг изображений
Другой способ добавления рамки — использование свойства outline . Оно, в отличие от border , не влияет на размеры элемента, поэтому прозрачная рамка уже не нужна.
img:hover < outline: 3px solid #00af64; /* Цветная рамка */ >Несмотря на схожесть этих свойств, у них есть небольшие различия:
- outline выводится вокруг элемента ( border внутри);
- outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Ещё один способ создания рамки заключается в добавлении фона к . Сам фон сразу не виден, поэтому надо установить ещё свойство padding , его значением выступает толщина рамки (пример 3).
Пример 3. Использование background и padding
Сюда же можно включить свойство border и получить новый вид рамки. Вообще, комбинируя padding , border , outline и background можно сделать множество самых разнообразных рамок.
См. также
- border
- Блочные элементы
- Добавление треугольника
- Колесо для сокращённых свойств
- Открываем блочную модель
- Оформление ссылок
- Повёрнутые рамки
- Свойство border
- Строчные элементы
Как изменить цвет рамки нажатой button
Как поменять синий цвет рамки уже нажатого input type = ‘button’ на какой-нибудь другой?
Отслеживать
задан 16 фев 2017 в 21:11
1,509 12 12 серебряных знаков 27 27 бронзовых знаков
Возможный дубликат вопроса: Непонятная граница в FireFox на кнопке
18 фев 2017 в 7:52
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Похоже, что это у вас :focus на этой кнопке. Попробуйте ей дать outline. Ну или меняйте его по тому же :focus.
Отслеживать
ответ дан 16 фев 2017 в 21:21
wonderlaw1 wonderlaw1
96 2 2 бронзовых знака
Спасибо, помогло.
16 фев 2017 в 21:25
Попробуйте установить класс active при нажатии на кнопку и ему дать рамку какую надо. Зависит от того что вам конкретно нужно, что бы она всегда такой была до следующего нажатия или просто на фокус.
Отслеживать
ответ дан 16 фев 2017 в 21:17
Slavik Mojito Slavik Mojito
62 1 1 серебряный знак 9 9 бронзовых знаков
Когда использую focus, рамка появляется вокруг фокуса. Решил свою проблему с помощью outline: none .
16 фев 2017 в 21:24
Нужно для неё задать псевдоклассы :focus , :active и применить outline: none; .
button < width: 100px; height: 100px; >button:focus, button:active
Отслеживать
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
ответ дан 17 фев 2017 в 7:55
183 8 8 бронзовых знаков
- html
- css
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.