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

Властивість border-top-style встановлює стиль верхньої межі елементу.

Цікаво те, що специфікація не визначає як межі з різними стилями поєднуються в кутах між собою.

правити

Порада

Ви також можете використовувати border-style, щоб задати стилі для всіх меж елементу, або border-top, щоб задати всі властивості для верхньої межі.

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

Порада

Значення без задання дорівнює medium. Ви можете змінити ширину межі за допомогою властивостей border-left-width або border-width.

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

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

Синтаксис

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

Властивість border-top-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-top-style	1.0	1.0	1.0	3.5	4.0

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

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

Приклади

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

<p>Верхня межа — крапками (dotted), решта суцільні.</p>

p {
    border-style: solid;
    border-top-style: dotted;
    padding: 8px;
}