border-style

Обновлено: 31.05.2022

border-style

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

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

border-style: [none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset] {1,4}

Значения

none Не отображает границу и её толщина (border-width) задаётся нулевой.
hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.

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

Табл. 2. Зависимость результата использования от числа значений

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

Пример

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

Объект.style.borderStyle

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

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

Браузеры

border-style

Посмотреть совместимость на Can I use?

border-style