Определяет стиль рамки со всех сторон. Это сокращенная запись отдельных стилей по сторонам: 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 | Устанавливает значение по умолчанию. |
Поддержка браузерами
border-style