CSS-свойство border-style
является кратким свойством для установки отдельных свойств стиля границы, то есть стиля border-top-style
, border-right-style
, border-bottom-style
и border-left-style
в одном.
Значение по умолчанию: | none |
Применяется к: | Все элементы |
Наследование: | Нет |
Анимирование: | Нет. Анимируемые свойства |
Версия: | CSS 1, 2, 3 |
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] 1 to 4 values | initial | inherit
Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.
- Если указано одно значение, оно применяется ко всем четырем сторонам границы.
- Если указано два значения, первое значение применяется к верхней и нижней границе, а второе к правой и левой.
- Если указано три значения, первое значение применяется к верхней границе, второе значение применяется к правой и левой границе, а третье значение к нижней границе.
- Если указано четыре значения, каждое значение применяется к границе отдельно в порядке сверху, справа, снизу и слева.
Примеры написания кода свойства border-style
:
p {
border-style: double;
border-width: 5px;
}
Значения свойств
В следующей таблице описаны значения этого свойства.
Значение | Описание |
---|---|
none |
Граница не будет отображается. |
hidden |
То же, что none , за исключением случая, когда ячейки таблицы имеют border-collapse и две ячейки имеют общую границу. Значение hidden гарантирует, что граница не отображается, поскольку hidden имеет приоритет над всеми другими стилями границ. |
dotted |
Отображает границу в виде серии точек. |
dashed |
Отображает границу в виде серии коротких отрезков, то есть штрихов. |
solid |
Отображает границу одной сплошной линией. |
double |
Отображает границу в виде двух параллельных сплошных линий с некоторым промежутком между ними. Сумма двух строк и пробел между ними равны значению border-width . |
groove |
Отображает границу, как будто она была вырезана на холсте. Это создает впечатление трехмерного изображения, которое обычно достигается созданием тени из двух цветов, которые немного светлее и темнее, чем border-color . |
ridge |
Отображает границу с эффектом, противоположным groove . Это также создает впечатление трехмерности, границы выглядят так, как будто они выходят из холста. |
inset |
Отображает границу, из-за которой элемент выглядит так, как будто он встроен в холст. Это создает впечатление трехмерного изображения, которое обычно достигается созданием тени из двух цветов, которые немного светлее и темнее, чем border-color . |
outset |
Отображает границу, которая имеет эффект, противоположный inset . Это также создает впечатление трехмерности, граница создает вид, как будто он «выходит» из холста. |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение его свойства родительского элемента border-bottom-style . |
Поддержка браузеров
Свойство border-style
поддерживается во всех основных браузерах.
Internet Explorer 7 и более ранние версии не поддерживают значение hidden
. IE8 поддерживает, но требует <!DOCTYPE>
. IE9 и выше поддерживают значение hidden
.