css властивість border-style

Властивість 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

Нотатка:

Значення hidden не підтримуєтья в IE7 та більш ранніх версіях, а IE8 вимагає !DOCTYPE, IE9 підтримує значення hidden.

Синтаксис

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Властивість border-style може отримувати 12 значень:


none: Кордон не відображається. Без задання.

hidden: Майже те саме що й none, за винятком вирішення конфліктів кордонів для елементів таблиці.

dotted: Кордон з точок.

dashed: Пунктирний кордон.

solid: Суцільний кордон.

double: Подвійний кордон.

groove: Рифлений 3D кордон. Ефект залежить від значення border-color.

ridge: Ребристий 3D кордон. Ефект залежить від значення border-color

inset: Урізаний (звеpxу-справа) 3D кордон. Ефект залежить від значення border-color.

outset: Урізаний (знизу-зліва) 3D кордон.Ефект залежить від значення border-color.

initial: Встановлює властивість у значення без задання

inherit: Вказує на спадковість властивості від свого батьківського елемента

Значення без задання:	none
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.borderStyle="dotted double"

Переглядач
border-style	1.0	4.0	1.0	1.0	3.5

Переглядач
border-style	1.0	1.0	1.0

Мобільних переглядачів ще не додано.

Приклади

Динамічний приклад

See the Pen <a href='https://codepen.io/css_in_ua/pen/pZmLab/'>pZmLab</a> by css.in.ua (<a href='https://codepen.io/css_in_ua'>@css_in_ua</a>) on <a href='https://codepen.io'>CodePen</a>.

Демонстрація роботи властивості

See the Pen <a href='https://codepen.io/css_in_ua/pen/GBaxGL/'>GBaxGL</a> by css.in.ua (<a href='https://codepen.io/css_in_ua'>@css_in_ua</a>) on <a href='https://codepen.io'>CodePen</a>.

Демонстрація роботи властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/jwgypp/'>border-style</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад використання властивості

See the Pen <a href='https://codepen.io/css_in_ua/pen/wxbmRa/'>bs</a> by css.in.ua (<a href='https://codepen.io/css_in_ua'>@css_in_ua</a>) on <a href='https://codepen.io'>CodePen</a>.

Встановлює різні кордони на кожній стороні елементів.

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;


}