border

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

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

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Это сокращённая форма установки значений границе. Для обширных данных используйте дополнительные свойства границ. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right. Свойство применимо ко всем элементам, создано в версии CSS1 но проходит валидацию согласно версии CSS3.

Синтаксис

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

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис.

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

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

inherit наследует значение родителя.

Дополнительные свойства

Свойство	Описание
border-width	Устанавливает ширину для границы
border-style	Устанавливает стиль для границы
border-color	Устанавливает цвет для границы
inherit	Наследует значение от родителя

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

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border</title>
<style type="text/css">
<!--
p {
border:10px dashed;
border-color:#0ba1d5;
color: red;
font-size: 40px;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<center>
<p>Граница текста = 10px</p>
</center>
<br>
</body>
</html>

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

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

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

Браузеры

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

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

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

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

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

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

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

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