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

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

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

Значення без задання дорівнює medium.

правити

Порада

Завжди оголошуйте властивість кордону стилю до властивості border-top-width. Елемент повинен мати кордони, перш ніж Ви зможете змінити їх товщину.

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

Порада

Для того, щоб показати межу, обов’язково потрібно її стилізувати, за допомогою border-top-style або border-style.

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

Нотатка

Специфікація не визначає чітко товщину кожного з ключових слів (thin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним: thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.

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

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

Синтаксис

border-top-width: medium|thin|thick|length|initial|inherit;

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

medium

Лінія середньої товщини (3 пікселі). Без задання.

автор: Svitlana

правити

thin

Тонка лінія. Значення в пікселях може змінюватися в залежності від браузера, але зазвичай становить 1 піксель

автор: Svitlana

правити

thick

Товста лінія (6 пікселів)

автор: Svitlana

правити

length

Для точного встановлення товщини можна використовувати будь-які одиниці виміру прийняті в CSS.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

<p>Верхня межа — 15 пікселів, решта типової товщини.</p>

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