border-bottom-width

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

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

Значение по умолчанию	medium
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#border-width-properties

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает толщину границы внизу элемента. Толщина может задаваться либо положительным числом, либо с использованием одного из именных значения. Свойство применимо ко всем элементам, создано в версии CSS1, но проходит валидацию согласно версии CSS3.

Синтаксис

border-bottom-width: значение | thin | medium | thick | inherit

Значения

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

Дополнительные значения border-bottom-width в табличном виде

Значение	Описание
<Число>	Положительное число,отрицательные значения не используются
thin	Ширина границы - тонкая линия = 2px
medium	Ширина границы - средняя линия = 4px
thick	Ширина границы - толстая линия = 6px
inherit	Наследует значение от родителя

Пример применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-bottom-width</title>
<style type="text/css">
<!--
.numer {
border-bottom-width:20px;
border-bottom-color:red;
border-bottom-style:dotted;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.thin {
border-bottom-width:thin;
border-bottom-color:red;
border-bottom-style:dotted;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.medium {
border-bottom-width:medium;
border-bottom-color:red;
border-bottom-style:dotted;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
.thick {
border-bottom-width:thick;
border-bottom-color:red;
border-bottom-style:dotted;
color: yellow;
font-size: 20px;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<center>
<div class="numer"><p>Ширина линии = 20px</p></div>
<div class="thin"><p>Ширина линии = thin = 2px</p></div>
<div class="medium"><p>Ширина линии = medium = 4px</p></div>
<div class="thick"><p>Ширина линии = thick = 6px</p></div>
</center>
<br>
</body>
</html>

Пример в действии

Объектная модель

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

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Границы | Добавил: evkuriy (04.07.2013)

Просмотров: 616 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

border-bottom-width

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

Версии CSS

Описание

Синтаксис

Значения

Дополнительные значения border-bottom-width в табличном виде

Значение

Описание

Пример применения свойства

Пример в действии

Объектная модель

Браузеры