CSS :: Свойство border-top
Сокращенное css-свойство border-top (от англ. top border – верхняя граница) позволяет одновременно задавать ширину, стиль и цвет верхней границы элемента, перечисляя их через пробел в любом порядке.
Характеристики
- Значение по умолчанию: см. каждое свойство.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: см. каждое свойство.
- JavaScript: object.style.borderTop="value".
Синтаксис
border-top: border-top-width || border-top-style || border-top-color
Значения
Можно указывать через пробел значения свойств border-top-width, border-top-style и border-top-color, задавая тем самым ширину, стиль и цвет границы в одном месте. При этом значения могут быть указаны в любом порядке. Стиль границы должен указываться обязательно. Цвет и ширину можно не указывать, тогда браузер использует для них соответствующие значения по умолчанию.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-border-shorthands
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/border-top
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ margin-top: 5em; padding: 2em; width: 400px; min-height: 40px; color: red; background-color: yellow; } .border_1{ border-left: solid; border-right: solid; border-top: solid; border-bottom: solid; } .border_2{ border-left: dashed 2px; border-right: dashed 2px; border-top: dashed 2px; border-bottom: dashed 2px; } .border_3{ border-left: double green; border-right: double green; border-top: double green; border-bottom: double green; } .border_4{ border-left: dotted #0000FF 10px; border-right: dotted #0000FF 10px; border-top: dotted #0000FF 10px; border-bottom: dotted #0000FF 10px; } /* Каждую границу оформляем по-разному */ .border_5{ border-left: solid; border-right: dashed 2px; border-top: double green; border-bottom: dotted #0000FF 10px; } </style> </head> <body> <p class="border_1"> border-left: solid<br> border-right: solid<br> border-top: solid<br> border-bottom: solid<br> По умолчанию используется цвет шрифта и<br> значение ширины границ medium </p> <p class="border_2"> border-left: dashed 2px<br> border-right: dashed 2px<br> border-top: dashed 2px<br> border-bottom: dashed 2px<br> По умолчанию используется цвет шрифта </p> <p class="border_3"> border-left: double green<br> border-right: double green<br> border-top: double green<br> border-bottom: double green<br> По умолчанию ширина границ принимается за medium </p> <p class="border_4"> border-left: dotted #0000FF 10px<br> border-right: dotted #0000FF 10px<br> border-top: dotted #0000FF 10px<br> border-bottom: dotted #0000FF 10px </p> <p class="border_5"> border-left: solid<br> border-right: dashed 2px<br> border-top: double green<br> border-bottom: dotted #0000FF 10px<br> Каждую границу оформили по-разному </p> </body> </html>
Пример №1