Свойство border-style устанавливает стиль рамки элемента. Можно указывать разные стили для разных сторон.
Возможные значения:
none — Так же как и hidden скрывает рамку. В этом случае вычисленные значения border-width будут равны 0, даже если указаны другие значения в них. В случае ячейки таблицы и border-collapse , установленного в collapse , значение none имеет наименьший приоритет, что означает, что если другая конфликтующая рамка установлена, то она будет отображаться.
hidden — Скрывает рамку, но имеет высший приоритет в случае border-collapse , равного collapse , с другими конфликтующими рамками.
dotted — Рамка из точек.
dashed — Пунктирная рамки.
solid — Сплошная рамка.
double — Определяет двойную рамку.
groove — Объёмная вдавленная рамка.
ridge — Объёмная выпуклая рамка.
inset — Элемент будет словно вдавлен в страницу.
outset — Элемент будет словно выступать на странице.
Можно указывать до четырёх значений, разделяя их между собой пробелом.
Если указано одно значение, то стиль рамки будет применён ко всем сторонам элемента.
Если указано два значения, то первое значение будет указывать стиль верхней и нижней рамки, а второе значение будет указывать стиль левой и правой рамки.
Если указано три значения, то первое задаёт стиль верхней стороны рамки, второе левой и правой стороны рамки, а третье указывает стиль нижней стороны рамки.
Если указано четыре значения, то они устанавливают стиль верхней стороны рамки, правой, нижней и левой соответственно.
Значение по умолчанию: none
Наследуется: Нет
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html> <head> <title>CSS border-style</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style> div { margin : 40px 10px 40px 10px; /* Отступы для div-ов, чтобы они не сливались*/ border-width : 5px; /* Делаем достаточно толстую границу, чтобы эффекты double и прочие были заметны.*/ } </style> </head> <body> <div> border-style : none; по умолчанию </div> <div style="border-style : dotted;"> border-style : dotted; </div> <div style="border-style : dashed;"> border-style : dashed; </div> <div style="border-style : solid;"> border-style : solid; </div> <div style="border-style : double;"> border-style : double; </div> <div style="border-style : groove;"> border-style : groove; </div> <div style="border-style : ridge;"> border-style : ridge; </div> <div style="border-style : inset;"> border-style : inset; </div> <div style="border-style : outset;"> border-style : outset; </div> <div> <a href="https://urvanov.ru/2016/02/25/css-border-style/">CSS border-style</a> </div> </body> </html> |