Приклади

HTML

Look at my borders.
Ви можете редагувати CSS нижче для експериментів зі стилями кордонів!
 .fun-border

Властивість border: межі для блоків

Декількома уроками раніше ми розглядали схематичне зображення блоку веб-сторінки, а також коротко розповідали про таку властивість CSS як border, за допомогою якого можна задати межі для елемента. На цей раз ми більш детально розглянемо цю властивість на прикладах.

Кордон розташовується між полем та відступом. Це означає, що margin знаходиться за кордоном. Кордон можна задавати як з усіх чотирьох сторін (як би укладаючи блок у рамку), так і з однієї, двох або трьох сторін. У CSS можна керувати товщиною, кольором та стилем кордонів. Вивчимо це докладніше.

Border-width: ширина кордону

За допомогою властивості border-width визначається ширина кордону. Найчастіше цей розмір вказується у пікселях. Можна задати однакову чи різну ширину всім чотирьох кордонів, наприклад:

/* всі 4 межі мають ширину 2px: */ border-width: 2px; /* верхня та нижня межі мають ширину 2px, ліва та права – 4px: */ border-width: 2px 4px; /* верхня межа - 2px, ліва і права - 6px, нижня - 3px: */ border-width: 2px 6px 3px; / * верхня межа - 2px, права - 3px, нижня - 4px, ліва - 5px: * / border-width: 2px 3px 4px 5px;

Крім цього, існують ключові слова для позначення ширини кордону:

• thin - межа шириною 2px;
• medium - межа шириною 4px;
• thick - межа шириною 6px.

Border-color: колір кордону

Властивість border-color задає колір меж. Кольори можна вказувати в будь-якому форматі CSS: ключовими словами, в шістнадцятковому вигляді або в RGB залежить від того, як вам зручніше. За аналогією з попередньою властивістю можна встановлювати як один колір для всіх кордонів, так і вибирати різні кольори для кожного кордону.

border-color: #FFFF00;

Також можна встановити прозорий колір, записавши:

border-color: transparent;

Border-style: стиль кордону

Завдяки властивості border-style ви можете робити зі звичайної межі пунктирну, подвійну, об'ємну – існує багато різних значень. Для цього скористайтеся такими ключовими словами:

• solid - суцільна межа;
• dotted - межа з точок;
• dashed - пунктирний кордон;
• double - подвійна межа;
• groove - об'ємна межа-виїмка;
• ridge – об'ємна межа з товстою кромкою (по суті, інверсія попереднього стилю);
• outset - видавлений кордон;
• inset - втиснута межа (по суті, інверсія попереднього стилю).

Як і у випадку з властивостями border-width і border-color, для кожної межі блоку можна задавати окремий стиль - наприклад, ви можете зробити верхню і нижню межі пунктирними, а праву та ліву - подвійними. Тут уже все залежить лише від фантазії.

border-style: double dotted;

Зверніть увагу: у різних браузерах зовнішній вигляд меж може трохи відрізнятися.

Загальна CSS-властивість border: 3 в 1

Щоб встановити стиль для кордону, не обов'язково по черзі використовувати всі три вищеперелічені властивості. Достатньо знати про загальну універсальну властивість border CSS, за допомогою якого ви набагато швидше напишете стиль та заощадите місце. Для цього довільно запишіть значення для всіх трьох властивостей:

border: 2px dotted #FF0000;

Кордони для окремих сторін

За допомогою додаткових властивостей border CSS ви можете створювати стиль для кожної межі блоку окремо. У цьому вам допоможуть такі властивості:

• border-top – стиль для верхньої межі;
• border-right - для правого кордону;
• border-bottom – для нижньої межі;
• border-left – для лівого кордону.

border-top: 2px solid #0000FF; border-bottom: 7px double #000080;

Підсумки

Тепер, коли ви знаєте, як робити кордони для блоків, ви можете потренуватись у їх створенні. Існує безліч способів коротко описати стиль, уникнувши надмірної кількості рядків у файлі CSS. Важливу роль грає знання принципів каскадності таблиць стилів. Розглянемо приклад.

Допустимо, ви хочете створити рамку для блоку div з трьома суцільними сірими кордонами, а нижню межу зробити пунктирною зеленою. Можна записати цей стиль таким чином:

Але це надто довгий запис. Все це можна записати коротше:

Як згадувалося вище, ми скористаємося властивостями каскадності CSS. Спочатку записуємо стиль для всіх чотирьох сторін рамки, після чого вказуємо стиль окремо для нижньої межі, тим самим частково перезаписуючи попередній стиль. Дуже важливо дотримуватися цієї послідовності рядків.

Міні-завдання

Спробуйте створити рамку для блоку div із розмірами 200×200 пікселів. Стилі для рамки мають бути такими:

• Верхню та нижню межі зробіть суцільними solid, задайте їм однаковий колір на вибір та ширину 5 пікселів.
• Ліву межу зробіть пунктирною dashed , шириною 3 пікселя, колір виберіть відмінний від попереднього.
• Праву межу зробіть подвійний double, шириною 7 пікселів, колір відмінний від двох попередніх.

Зрештою ваша робота має виглядати так (за винятком кольору, який ви вибираєте самі):

Результат завдання (вигляд у Chrome)