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;
  • всі чотири границі складаються з точок

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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 кордон.Ефект залежить від значення border-color.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<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>

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;
}