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


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

Приклади


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

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

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

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

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

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;


} 

Додаткові посилання