border - bottom - style

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

Опис

Встановлює стиль межі внизу елементу.

Синтаксис

border - bottom - style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Значення

none Лінія не відображається і значення її товщини обнуляється.

Hidden Має той же ефект, що і none за винятком застосування border - bottom - style до елементів таблиці, у якої значення властивості border, - collapse встановлене як collapse. В цьому випадку нижня межа в осередку не відображатиметься взагалі.

dotted Лінія складається з набору точок.

dashed Пунктирна лінія, що складається з серії коротких відрізків.

solid Суцільна лінія.

Double Подвійна лінія.

groove Створює ефект втиснутої лінії.

ridge Створює ефект рельєфної лінії.

inset Псевдотривимірна лінія.

outset Псевдотривимірна лінія.

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

Вид вказаних стилів представлений на мал. 1.

Рис.1. Стилі меж

Приклад

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 - style</title>

<style type="text/css">

DIV#panel {

background: #ccc; /* Колір фону */

}

# #panel P {

padding: 5px; /* Додаємо поля */

margin: 0; /* Прибираємо відступи у параграфа */

}

# #panel P#title {

background: navy; /* Колір фону */

color: white; /* Колір тексту */

border - bottom - width: 2px; /* Товщина лінії внизу */

border - bottom - style: solid; /* Стиль лінії внизу */

border - bottom - color: white; /* Колір лінії внизу */

}

</style>

</head>

<body>

<div id="panel">

<p id="title">Луцький національний технчний університет </p>

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

</div>

</body>

</html>

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

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

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

[window.]document.getElementById("elementID").style.borderBottomStyle

Браузери

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

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

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