css властивість border

Властивість border - універсальна властивість і дозволяє одночасно задати значення таким властивостям як:

• border-width
• border-style
• border-color

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

Для встановлення кордону тільки на певних сторонах елементу, скористайтеся властивостями border-top, border-bottom, border-left, border-right.

Як і з усіма скороченими записами, окреме значення, яке не вказане отримає свої значення без задання. Важливо те, що border не може бути використаний для встановлення background-image, але скидає значення цієї властивості до початкового, тобто none.

правити

Нотатка

Рекомендується використовувати border тільки, щоб задати усі border-властивості одночасно. В той час, як border-width, border-style та border-color дозволяють задавати 4 різні значення для всіх сторін окремо, а border встановлює одне однакове значення для всіх сторін.

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

Нотатка

Браузер 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

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="box">Рамка: 1px, суцільна, червона — все одним рядком.</div>

.box {
    border: 1px solid #ff0000;
    padding: 12px;
}