css.in.ua
Підтримати

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

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

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

Властивість `border`

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

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

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

Нотатка:

Рекомендується використовувати border тільки, щоб задати усі 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.

Синтаксис

border: border-width border-style border-color|initial|inherit;

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

border-width

Визначає ширину кордону.

border-style

Визначає стиль кордону.

border-color

Визначає колір кордону.

initial

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

inherit

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

Значення без задання: medium none color
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.border="3px solid blue"

Переглядачі

Переглядач
border

1.0

4.0

1.0

1.0

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

1.0

1.0

1.0

Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Демонстрація використання властивості

Приклад роботи властивості

Проста демонстрація використання властивості border

Синтаксис властивості

.box {


  border: 1px solid #ff0000;


}

Додаткові посилання

Документи

Зв'язок