border — style
Рамку можно сделать двойной, пунктирной и даже объёмной в точку! И всё это одним свойством.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство border — style управляет стилем рамки элемента.
Пример
Скопировать ссылку «Пример» Скопировано
Вокруг абзаца текста будет рамка, состоящая из чёрточек:
p border-style: dashed;>p border-style: dashed; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Стиль рамки задаётся при помощи ключевых слов:
- none — отключает рамку (значение по умолчанию).
- solid — сплошная рамка. Этот стиль используется чаще всего.
- dotted — рамка состоит из точек с пробелами между ними.
- dashed — рамка состоит из коротких чёрточек с пробелами между ними.
- double — рамка состоит из двух сплошных линий с небольшим нерегулируемым отступом между ними.
Редкие значения
Скопировать ссылку «Редкие значения» Скопировано
Ниже будут перечислены редко используемые стили рамки:
- groove — рамка объёмная, с тенями от источника света, находящегося в верхнем левом наружном углу.
- ridge — рамка объёмная, с тенями от источника света, находящегося в нижнем правом внешнем углу.
- inset — рамка с тенями от источника света, находящегося в нижнем правом внутреннем углу.
- outset — рамка с тенями от источника света, находящегося в левом верхнем внутреннем углу.
Понять текстовое описание этих стилей довольно сложно, посмотрите пример ниже:
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство border — style является шорткатом для свойств:
- border — bottom — style
- border — left — style
- border — right — style
- border — top — style
Но без особой необходимости эти свойства отдельно не используются. Более того, чаще всего стиль рамки задаётся внутри шортката border .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Достаточно определить стиль рамки для того, чтобы она появилась вокруг элемента. Остальные значения будут установлены в значения по умолчанию: ширина рамки 3 пикселя, а цвет такой же, как унаследованный цвет текста (по умолчанию — чёрный).
💡 Если рамка тонкая, например, 1 пиксель, то внешне значение double почти не будет отличаться от solid . Для визуальной разницы задавайте рамку большей ширины.
💡 Если border — style свойство применяется к таблице со свойством border — collapse в значении collapsed , то inset будет вести себя как groove , outset — как ridge .
border-bottom-style
none Линия не отображается и значение ее толщины обнуляется. hidden Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае нижняя граница в ячейке не будет отображаться вообще. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной линии. ridge Создает эффект рельефной линии. inset Псевдотрехмерная линия. outset Псевдотрехмерная линия. inherit Наследует значение родителя.
Вид указанных стилей представлен на рис. 1.
HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства border-bottom-style
Объектная модель
[window.]document.getElementById(» elementID «).style.borderBottomStyleБраузеры
Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
CSS по категориям
Поля
Анимация
Градиент
Скруглённые уголки
Изображения
Псевдоэлементы
Псевдоклассы
Печать
Контент
Интерфейс
Таблица
Отступы
Список
Текст
Шрифт
Форматирование
Размеры
Позиционирование
Границы
Цвет и фон
Селекторы
- Селекторы тегов
- Идентификаторы
- Классы
- Мультиклассы
- Универсальный селектор
- Вложенные селекторы
- Дочерние селекторы
- Соседние селекторы
- Родственные селекторы
- [атрибут|=»значение»]
- Селекторы атрибутов
- [атрибут=»значение»]
- [атрибут^=»значение»]
- [атрибут$=»значение»]
- [атрибут*=»значение»]
- [атрибут~=»значение»]
Свойство border-style
Свойство border-style задает стиль границы элемента для всех его сторон или индивидуально для каждой.
Это свойство применимо ко всем элементам.
Значение свойства border-style
— none — граница отсутствует,
— solid – граница в виде сплошной линии,
— double — граница в виде двойной сплошной линии. Минимальная ширина границы 3 пикселя, иначе она будет отображаться сплошной,
— dashed – пунктирная граница,
— dotted – точечная граница (мелкий пунктир),
— groove – вдавленная граница с эффектом объема,
— ridge – выпуклая граница с эффектом объема,
— inset – еще один вариант вдавленной границы с эффектом объема,
— outset — еще один вариант выпуклой границы с эффектом объема,
— inherit — принимает значение свойства родительского элемента.
При задании стиля границы допускается указывать от 1 до 4 значений, разделяя их пробелом. Результат зависит от количества и приведен в таблице:
| Количество значений | Результат |
| 1 | Стиль границы для всех сторон элемента одинаков. |
| 2 | Первое значение устанавливает стиль верхней и нижней границы, второе – боковых границ элемента. |
| 3 | Первое значение устанавливает стиль верхней границы, второе – боковых границ, а третье значение — нижней границы элемента. |
| 4 | Значения поочередно устанавливают стиль границы для верхней, правой, нижней и левой сторон элемента. |
Нет смысла описывать отдельно каждое из свойств border-top-style , border-right-style , border-bottom-style и border-left-style , задающих стиль границы для каждой из сторон элемента индивидуально.
Для всех абзацев текущего документа (в его голове — в теге ) задан цвет и толщина границы. Далее для каждого абзаца задаем индивидуальный стиль границы при помощи свойства border-style.
Пунктирная граница
Точечная граница (мелкий пунктир)
Граница состоит из двойной сплошной линии
Вдавленная граница с эффектом объема
Выпуклая граница с эффектом объема
Граница состоит из сплошной линии
Еще один вариант вдавленной границы с эффектом объема
Еще один вариант выпуклой границы с эффектом объема
Верхняя и нижняя границы данного абзаца обозначены двойной сплошной линией, а боковые границы — пунктиром.
Нижняя граница данного абзаца обозначена пунктирной линией