html.okpython.net
Основы создания сайтов
CSS :: Свойство border-style
Сокращенное css-свойство border-style (от англ. border style – стиль границы) используется для установки стиля границ элемента в одном объявлении, позволяя задавать стиль как отдельных, так и сразу всех границ элемента.
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.borderStyle="value".
Синтаксис
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4}
Значения
- none – граница не отображается, браузер обнуляет ее ширину (значение используется по умолчанию).
- hidden – в принципе тоже самое, что и none, за исключением того, что в случае применения данного значения к границам ячеек таблицы, у которой значение свойства border-collapse установлено как collapse, граница вокруг ячейки не будет отображаться вообще, включая и совмещенные границы смежных ячеек.
- dotted – линия границы будет иметь точечный вид.
- dashed – линия границы будет иметь пунктирный вид.
- solid – линия границы будет сплошной.
- double – линия границы будет двойной.
- groove – линия границы будет иметь объемный рифленый вид с эффектом вдавленности.
- ridge – линия границы будет иметь объемный рифленый вид с эффектом выпуклости.
- inset – линия границы будет иметь объемный вид с эффектом вдавленности.
- outset – линия границы будет иметь объемный вид с эффектом выпуклости.
При этом разрешается указывать через пробел одно, два, три или четыре значения:
- одно значение – стиль задается для всех четырех сторон элемента;
- два значения – первое значение задает стиль верхней и нижней границы элемента, второе – правой и левой;
- три значения – первое значение задает стиль верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
- четыре значения – стиль границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-border-style
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/border-style
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ margin-top: 5em; padding: 2em; width: 400px; min-height: 40px; border: solid 15px green; } /* Четыре значения */ .border_1{ border-style: none dotted dashed solid; } /* Три значения */ .border_2{ border-style: double groove ridge; } /* Два значения */ .border_3{ border-style: inset outset; } /* Одно значение */ .border_4{ border-style: dashed; } </style> </head> <body> <p class="border_1"> Четыре значения<br> border-style: none dotted dashed solid; </p> <p class="border_2"> Три значения<br> border-style: double groove ridge; </p> <p class="border_3"> Два значения<br> border-style: inset outset; </p> <p class="border_4"> Одно значение<br> border-style: dashed; </p> </body> </html>
Пример №1