outline-style

Вы можете приобрести локальную версию справочника по CSS в формате CHM или HTML

Браузер	Internet Explorer				Netscape		Opera				Safari			Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Нет	Нет	Нет	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

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

CSS	CSS2, CSS2.1
Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Аналог HTML	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style

Описание

Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Синтаксис

Значения

none: Граница не отображается. Это значение перекрывает атрибут outline-width, если он присутствует.
dotted: Линия состоящая из набора точек.
dashed: Пунктирная линия, состоящая из серии коротких отрезков.
solid: Сплошная линия.
double: Двойная линия.
groove: Создает эффект вдавленной рамки.
ridge: Создает эффект рельефной границы.
inset: Псевдотрехмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset: Псевдотрехмерная рамка, при которой левая и верхяя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.

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

Рис. 1. Вид границы с разным значением стилей

Пример

HTML 4.01CSS 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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>outline-style</title>
  <style type="text/css">
   .noborder A {
    outline-style: none; /* Убираем границу вокруг ссылок */ 
   }
  </style>
 </head> 
<body> 
   <p><a href="http://ya.ru">Яндекс</a>
   <a href="http://google.ru">Google</a></p>

   <p class="noborder"><a href="http://ya.ru">Яндекс</a>
   <a href="http://google.ru">Google</a></p>
 </body>
</html>

Результат примера показан на рис. 2. В данном примере для браузера Firefox убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка еще будет отображаться, а во втором абзаце она скрывается с помощью значения none атрибута outline-style.

Рис. 2

Рис. 2. Использование атрибута outline-style для ссылок в Firefox

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

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