css властивість border-style
Властивість border-style дозволяє встановити стиль межі для всіх сторін елементу.
Ви можете використати від одного до чотирьох значень. Кожне значення визначає стиль для кожної зі сторін елементу.
Наприклад, якщо задано всі чотири значення вони задаватимуть стилі для верхньої, правої, нижньої та лівої сторін(саме в такому порядку). Три значення задають стилі для верхньої, лівої та правої, нижньої сторін(саме в такому порядку).
Початкове значення для border-style дорівнює none, тобто межа не показується. У випадку відсутності значення для цієї властивості, елемент не матиме межі, навіть якщо будуть прописані border-color та border-width.
Для border-style має бути задане одне, два, три або чотири значення:
- одне значення застосовуються для всіх чотирьох сторін;
- два значення застосовують перше до верхньої та нижньої сторін, друге - лівої та правої;
- три значення застосовують перше до верхньої сторони, друге - лівої та правої, третє - нижньої;
- чотири значення застосовуються для верхньої, правої, нижньої та лівої сторін, у порядку за годинниковою стрілкою.
Приклади:
border-style:dotted solid double dashed;- веpxня границя складається з точок
- права границя є заповненою
- нижня границя подвоєною
- ліва границя пунктирна
border-style:dotted solid double;- веpxня границя складається з точок
- права і ліва границі є заповненими
- нижня границя подвоєна
border-style:dotted solid;- веpxня і нижня границі складаються з точок
- права і ліва границі є заповненими
border-style:dotted;- всі чотири границі складаються з точок
| dotted |
| dashed |
| solid |
| double |
| groove |
| ridge |
| inset |
| outset |
- Нотатка
-
Значення
автор: Svitlanahiddenне підтримуєтья в IE7 та більш ранніх версіях, а IE8 вимагає!DOCTYPE, IE9 підтримує значенняhidden.
Синтаксис
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Властивість border-style може отримувати 12 значень:
-
none -
Кордон не відображається. Без задання.
автор: Svitlana -
hidden -
Майже те саме що й none, за винятком вирішення конфліктів кордонів для елементів таблиці.
автор: Svitlana -
dotted -
Кордон з точок.
автор: Svitlana -
dashed -
Пунктирний кордон.
автор: Svitlana -
solid -
Суцільний кордон.
автор: Svitlana -
double -
Подвійний кордон.
автор: Svitlana -
groove -
Рифлений 3D кордон. Ефект залежить від значення border-color.
автор: Svitlana -
ridge -
Ребристий 3D кордон. Ефект залежить від значення border-color
автор: Svitlana -
inset -
Урізаний (звеpxу-справа) 3D кордон. Ефект залежить від значення border-color.
автор: Svitlana -
outset -
Урізаний (знизу-зліва) 3D кордон.Ефект залежить від значення
автор: Svitlanaborder-color. -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderStyle="dotted double" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Від одного до чотирьох значень: чотири — верх/право/низ/ліво, три — верх/боки/низ, два — верх-низ/боки, одне — всі сторони.
HTML
<p class="one">чотири значення: dotted solid dashed double</p>
<p class="two">три значення: dotted solid dashed</p>
<p class="three">два значення: dotted solid</p>
<p class="four">одне значення: dotted</p>CSS
p { padding: 8px; }
p.one {
border-style: dotted solid dashed double;
}
p.two {
border-style: dotted solid dashed;
}
p.three {
border-style: dotted solid;
}
p.four {
border-style: dotted;
}Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!