html.okpython.net
Основы создания сайтов
CSS :: Свойство border-top-style
css-свойство border-top-style (от англ. top border style – стиль верхней границы) используется для установки стиля верхней границы элемента.
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.borderTopStyle="value".
Синтаксис
border-top-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]
Значения
- 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-top-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-top-style: solid; border-right-style: dashed; border-bottom-style: groove; border-left-style: double; } </style> </head> <body> <p class="border_1"> Стили границ по отдельности<br> border-top-style: solid;<br> border-right-style: dashed;<br> border-bottom-style: groove;<br> border-left-style: double; </p> </body> </html>
Пример №1