css властивість border
Властивість border - універсальна властивість і дозволяє одночасно задати значення таким властивостям як:
- border-width
- border-style
- border-color
Значення можуть йти в будь-якому порядку, розділяючись пробілом, браузер сам визначить, яке з них відповідає потрібній властивості.
Для встановлення кордону тільки на певних сторонах елементу, скористайтеся властивостями border-top, border-bottom, border-left, border-right.
Як і з усіма скороченими записами, окреме значення, яке не вказане отримає свої значення без задання. Важливо те, що border не може бути використаний для встановлення background-image, але скидає значення цієї властивості до початкового, тобто none.
- Нотатка
-
Рекомендується використовувати
автор: Svitlanaborderтільки, щоб задати усіborder-властивості одночасно. В той час, якborder-width,border-styleтаborder-colorдозволяють задавати 4 різні значення для всіх сторін окремо, аborderвстановлює одне однакове значення для всіх сторін. - Нотатка
-
Браузер Internet Explorer до шостої версії включно при товщині кордону 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх кордонів товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється в dashed. Internet Explorer до версії 7.0 включно не підтримує значення inherit.
автор: Svitlana
Синтаксис
border: border-width border-style border-color|initial|inherit;Властивість border може отримувати 5 значень:
-
border-width -
Визначає ширину кордону.
автор: Svitlana -
border-style -
Визначає стиль кордону.
автор: Svitlana -
border-color -
Визначає колір кордону.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)
автор: Svitlana
| Значення без задання: | medium none color |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.border="3px solid blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Універсальний запис рамки: товщина, стиль і колір однією декларацією.
HTML
<div class="box">Рамка: 1px, суцільна, червона — все одним рядком.</div>CSS
.box {
border: 1px solid #ff0000;
padding: 12px;
}Проста демонстрація використання властивості border
Динамічний приклад
Демонстрація використання властивості
Приклад роботи властивості
Коментарі
Коментарів ще немає — будьте першим!