1. Border-width: ширина кордону
2. Border-color: колір кордону
3. Border-style: стиль кордону
4. Межі для окремих сторін
5. підсумки
6. Міні-завдання

Кількома уроками раніше ми розглядали схематичне зображення блоку веб-сторінки, а також коротко розповідали про таку властивість 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;

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

Щоб задати стиль для кордону, не обов'язково по черзі використовувати всі три перерахованих вище властивості. Досить знати про загальний універсальному властивості 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 з трьома суцільними сірими кордонами, а нижню межу зробити пунктирною зеленої. Можна записати цей стиль таким чином:

div {border-right: 8px double # FF0000; border-left: 8px double # FF0000; border-bottom: 8px double # FF0000; border-top: 4px dotted # FDD201; }

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

div {border: 8px double # FF0000; border-top: 4px dotted # FDD201; }

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

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

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

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

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

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

Далі в підручнику: border-radius - закруглені кути в CSS .