border-style

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

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

CSS	CSS1+
Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Синтаксис

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

Аргументы

Для управления видом границы предоставляется несколько значений свойства border-style. Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 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

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента

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

none - Не отображает границу и ее толщина (border-width) задается нулевой.

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

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

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

Число значений

Результат

Цвет границы будет установлен для всех сторон элемента.

Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.

Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.

Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Табл. 2. Изменение цвета в зависимости от числа значений

Пример

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



      <html>

      <head>

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

      <title>border-style</title>

      <style type="text/css">
P{

  border-style: double;  /*Стиль линии вокруг параграфа*/

  padding: 5px;  /*Поля вокруг текста*/

  }

  </style>

  </head>

  <body>


   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

  


    </body>

    </html>

Демонстрация примера

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

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

border-style

Категории

Последние комментарии

	Русский
	English