| Інтернет Експлорер | Хром | Опера | Сафарі | Файрфокс | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 2.0+ | 1.5+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | немає |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює стиль зовнішньої межі елемента. По відмінності від лінії, яка задається через border, лінія через outline відображається навколо елемента, не впливаючи на ширину блоку або його положення.
Синтаксис
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Значення
- none
- Межа не відображається. Це значення перекриває властивість outline-width, якщо вона присутня.
- dotted
- Лінія, складена з набору крапок.
- dashed
- Пунктирна лінія, складена з серії коротких відрізків.
- solid
- Суцільна лінія.
- double
- Подвійна лінія.
- groove
- Створює ефект вдавленої рамки.
- ridge
- Створює ефект рельєфної межі.
- inset
- Псевдотривимірна рамка, при якій права та нижня межа світлішається, а ліва та верхня лінії затемнюються.
- outset
- Псевдотривимірна рамка, при якій ліва та верхня межа мають більш світлий відтінок, ніж заданий колір, а права та нижня лінії затемнюються.
- inherit
- Успадковує значення батька.
Вигляд зазначених стилів представлений на рис. 1.
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>outline-style</title>
<style>
.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. У цьому прикладі для браузера IE8 видаляється пунктирна межа навколо посилань, яка виникає при їх активації. У першому абзаці рамка ще буде відображатися, а в другому абзаці вона приховується за допомогою значення none властивості outline-style.
Об'єктна модель
[window.]document.getElementById("ідентифікаторелемента")style.outlineStyle