CSS приклад: border-top

Приклад використання CSS властивості border-top

Властивість border-top дозволяє одночасно встановити товщину, стиль та колір межі зверху елемента. Значення можуть йти в будь-якому порядку, розділяючись пробілом, браузер сам визначить, яке з них відповідає потрібній властивості.

Синтаксис

border-top: [border-width || border-style || border-color] | inherit

Опис

border-width визначає товщину межі. Для управління її виглядом надається кілька значень border-style. Їх назви та результат дії представлені на рис. 1.

border-color встановлює колір межі, значення може бути в будь-якому допустимому форматі для CSS.

inherit успадковує значення батька.

Приклад

Результат цього прикладу показаний на рис. 2.

Об'єктна модель

[window.]document.getElementById("ідентифікаторЕлемента").style.borderTop

Браузери

Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px і більше значення dotted працює коректно. Ця помилка виправлена в IE7, але лише для всіх меж товщиною 1px. Якщо одна з меж блоку має товщину 2px і більше, то в IE7 значення dotted перетворюється на dashed.

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Стиль межі в різних браузерах може трохи відрізнятися при використанні значень groove, ridge, inset або outset.

Межі

Часті запитання

  • Q: Як використовувати border-top в CSS?

    A: Властивість border-top в CSS використовується для задання стилю, ширини та колір верхньої межі елемента.

  • Q: Де використовують border-top в CSS?

    A: Властивість border-top використовується для створення верхньої межі елемента, наприклад, в контейнерах, таблицях, кнопках тощо.

  • Q: Як задати товщину верхньої межі з допомогою border-top?

    A: Щоб задати товщину верхньої межі з допомогою border-top, використовуйте властивість border-top-width та вказуйте потрібне значення (наприклад, px, em).

  • Q: Як змінити колір верхньої межі елемента за допомогою border-top?

    A: Для зміни коліру верхньої межі елемента з допомогою border-top використовуйте властивість border-top-color та вкажіть потрібний колір (наприклад, назву кольору або hex-код).

  • Q: Як змінити стиль верхньої межі елемента з допомогою border-top?

    A: Для зміни стилю верхньої межі елемента з допомогою border-top використовуйте властивість border-top-style та вкажіть потрібний стиль (наприклад, solid, dashed, dotted тощо).