Тег CSS border-bottom
Властивість дозволяє одночасно встановити товщину, стиль і колір межі знизу елементу. Значення можуть йти в будь-якому порядку, розділяючись пробілом, браузер сам визначить, яке з них відповідає потрібній властивості.
Синтаксис
border-bottom: [border-width || border-style || border-color] | inherit
Значення
Значення border-width визначає товщину межі. Для управління її виглядом надається кілька значень властивості border-style. Їх назви та результат дії представлені на рис. 1.
border-color встановлює колір межі, значення може бути в будь-якому допустимому форматі для CSS.
inherit успадковує значення батька.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-bottom</title>
<style>
.panel {
background: #ccc; /* Цвет фона */
}
.panel P.content {
padding: 5px; /* Добавляем поля */
margin: 0; /* Убираем отступы у параграфа */
border-top: 2px dotted white; /* Параметры линии вверху */
}
.panel P.title {
font-family: sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
padding: 5px; /* Добавляем поля */
margin: 0; /* Убираем отступы у параграфа */
background: maroon; /* Цвет фона */
color: white; /* Цвет текста */
border-bottom: 2px solid white; /* Параметры линии внизу */
}
</style>
</head>
<body>
<div class="panel">
<p class="title">Lorem ipsum dolor sit amet</p>
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.</p>
</div>
</body>
</html>Результат даного прикладу показаний на рис. 2.
Браузери
Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px і більше значення dotted працює коректно. Ця помилка виправлена в IE7, але лише для всіх меж товщиною 1px. Якщо одна з меж блоку має товщину 2px і більше, то в IE7 значення dotted перетворюється на dashed.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.
Стиль межі в різних браузерах може трохи відрізнятися при використанні значень groove, ridge, inset або outset.