Свойство border-style в CSS

стиль рамки

Определяет стиль рамки со всех сторон. Это сокращенная запись отдельных стилей по сторонам: border-top-style, border-right-style, border-bottom-style, border-left-style.

Если у border-style задано четыре значения, например border-style: solid dotted double dashed;, они задают стиль рамки сверху black, справа white, снизу blue, слева green.

Если у border-style задано три значения, например border-style: solid dotted double;, они задают стиль рамки сверху solid, справа и слева dotted, снизу double.

Если у border-style задано два значения, например border-style: solid dotted;, они задают стиль рамки сверху и снизу solid, справа и слева dotted.

Если у border-style задано одно значение, например border-style: solid;, оно задает стиль рамки со всех сторон solid.

Примеры

Значения

Значение Описание
none По умолчанию. Рамка не отображается.
hidden Рамка не отображается. Отличие от none в том, что для свойства border-collapse работает правильнее.
solid Одинарная, прямая, сплошная линия.
dotted Пунктирная линия из точек. Задать расстояние между точками нельзя, оно зависит от браузера.
dashed Пунктирная линия из небольших прямоугольников. Задать длинну прямоугольников нельзя, она зависит от браузера.
double Двойная рамка.
groove Рамка с 3D-эффектом. Две грани внутрь.
ridge Рамка с 3D-эффектом. Две грани наружу.
inset Рамка с 3D-эффектом. Одна грань внутрь.
outset Рамка с 3D-эффектом. Одна грань наружу.
inherit Наследует значение родительского блока.
initial Устанавливает значение по умолчанию.

Поддержка браузерами

НастольныеМобильные
Chrome
Edge
Firefox
IE
Opera
Safari
Chrome
Firefox
Opera
Safari
Samsung
Android
border-style
1
12
1
4
3.5
1
18
4
14
3
1.0
3
Поддерживается: Да
Получай полезные материалы удобным способом!
Добавить комментарий