border-style

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

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

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Значения

Для управления видом границы предоставляется несколько значений свойства border-style. Вид зависит от используемого браузера и заданной толщины границы. В табл. приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

1 пиксел	3 пиксела	5 пикселов	7 пикселов
dotted	dotted	dotted	dotted
dashed	dashed	dashed	dashed
solid	solid	solid	solid
double	double	double	double
groove	groove	groove	groove
ridge	ridge	ridge	ridge
inset	inset	inset	inset
outset	outset	outset	outset

Кроме перечисленных в таблице значений используются следующие ключевые слова.

none: Не отображает границу и ее толщина (border-width) задается нулевой.
hidden: Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.
inherit: Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

*Табл. 2. Зависимость результата использования от числа значений*
Число значений	Результат
1	Стиль границы будет задан для всех сторон элемента.
2	Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3	Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Немножко в другом виде дополнительные значения border-style

Значение	Описание
none	При таком значении границы отсутствуют
hidden	Скрытая граница,не отображает границу но в блочной модели учитывается ширина границы
dotted	Серия точек
dashed	Пунктирная линия
solid	Сплошная линия
double	Двойная сплошная линия
groove	Выглядит как будто содержимое выдавлено из фона
ridge	Выглядит как будто содержимое вдавлено в фон
inset	Выглядит как будто содержимое,это нажатая кнопка
outset	Выглядит как будто содержимое,это не нажатая кнопка
inherit	Наследует значение от родителя

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

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-style</title>
<style type="text/css">

</style>
</head>
<body>
<center>
<div class="none"><p>none - стиль границы не указан</p></div><br>
<div class="hidden"><p>hidden - стиль скрыт, но ширина осталась</p></div><br>
<div class="dotted"><p>dotted - стиль, как серия точек</p></div><br>
<div class="dashed"><p>dashed - стиль, как пунктирная линия</p></div><br>
<div class="solid"><p>solid - стиль, как сплошная линия</p></div><br>
<div class="double"><p>double - стиль, как двойная сплошная линия</p></div><br>
<div class="groove"><p>groove - стиль, как будто содержимое выдавлено из фона</p></div><br>
<div class="ridge"><p>ridge - стиль, как будто содержимое вдавлено в фон</p></div><br>
<div class="inset"><p>inset - стиль, как будто содержимое - это нажатая кнопка</p></div><br>
<div class="outset"><p>outset - стиль как будто содержимое - это не нажатая кнопка</p></div><br>
</center>
<br>
</body>
</html>

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

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

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

Браузеры

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

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

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

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

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

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

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

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

border-style

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

Версии CSS

Описание

Синтаксис

Значения

Немножко в другом виде дополнительные значения border-style

Значение

Описание

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

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

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

Браузеры