border - bottom

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

Коротка інформація

CSS | CSS1
Значення за умовчанням | Залежить від використання
Наслідує | Ні
Застосовується | До усіх елементів
Аналог HTML | <img border > | <table border>
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/box.html#border - shorthand - properties

Опис

Властивість дозволяє одночасно встановити товщину, стиль і колір межі внизу елементу. Значення можуть йти у будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

Синтаксис

border - bottom: [border - width || border - style || border - color] | inherit

Значення

Значення border - width визначає товщину межі. Для управління її видом надається декілька значень властивості border - style. Їх назви і результат дії представлений на мал. 1.

Рис.1. Стилі рамок

border - color встановлює колір межі, значення може бути у будь-якому допустимому для CSS форматі.

inherit наслідує значення батька.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>border - bottom</title>

<style type="text/css">

. .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">Луцький національний технчний університет </p>

<p class="content">Луцький національний технчний університет є одним із найкращих професійних закладів освіти у місті Луцьку</p>

</div>

</body>

</html>

Результат цього прикладу показаний ні мал. 2.

Мал. 2. Застосування властивості border - bottom

Об'єктна модель

[window.]document.getElementById

("elementID").style.borderBottom

Браузери

Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для усіх меж завтовшки 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється на dashed.

Internet Explorer до сьомої версії включно не підтримує значення inherit.

Стиль межі в різних браузерах може дещо розрізнятися при використанні значень groove, ridge, inset або outset.