Определяет стиль рамки со всех сторон. Это сокращенная запись отдельных стилей по сторонам: 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
Androidborder-style
