1.3. Границі

Границі блоків, так само як відступи і поля, діляться на чотири сегменти: верхній, правий, нижній і лівий. Кожен окремий сегмент границі блоку може мати свої характеристики: колір, товщину, тип ліній. Для задання характеристик можуть використовуватися окремі властивості або стенографічні властивості, що дозволяють записувати правила в більш короткій формі.

Властивості border-top-width, border-right-width, border-bottom-width, border-left-width.

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

• thin – тонка границя;

• medium – границя середньої товщини;

• thick – товста границя.

Якої товщини буде границя, залежить від браузера, але при цьому обов'язково виконання наступного співвідношення: thin - medium - thick. Ці значення не повинні змінюватися протягом усього документа. За замовчуванням використовується ключове слово medium.

Товщину границі можна вказати і в довільних одиницях виміру довжини: пікселях, пунктах, сантиметрах, міліметрах і т.д. Неприпустимо задання величин у відсотках, а також негативних значень.

Наприклад, за допомогою CSS можна легко взяти в рамку текст, розташований усередині абзацу. Так, наприклад, можна оформити особливо важливу інформацію – примітки, додатки, особливі зауваження.

Р { border-top-width: lpx; border-right-width: medium; border-bottom-width lpx; border-left-width: thin; }

Це правило задає тільки товщину границі, але не визначає її колір та тип лінії.

Властивість border-width

Ця властивість стенографічного типу задає значення властивостей border-top-width, border-right-width, border-bottom-width, border-left-width. Властивість border-width може мати одне, два, три або чотири значення. Якщо задано тільки одне значення, це означає, що товщина всіх сегментів границі навколо блоку однакова:

P {border-width: 1px}

Текст абзацу буде обрамлений рамкою товщиною 1 піксель. Якщо задані два значення, то перше відноситься до верхнього і нижнього сегмента границі, друге – до правого і лівого, при цьому товщина сегмента в кожній з пар буде однаковою.

DIV { border-width: thin mediun }

У цьому прикладі для контейнерів DIV встановлюються тонкі (thin) сегменти границі зверху і знизу контейнера та середні по товщині (mediun) зліва і справа.

Якщо задано три значення, то перше застосовується до товщини верхнього сегмента границі, друге – лівого і правого, а третє – нижнього сегмента.

H1 { border-width: 0px lpx 2px }

У цьому прикладі верхній сегмент границі заголовка відсутній, ліворуч і праворуч границі вони будуть однакові – по 1 пікселю, а товщина нижнього сегмента буде дорівнює 2 пікселям.

Якщо задані всі чотири значення, то вони відповідатимуть товщині верхнього, правого, нижнього та лівого сегментів границі відповідно. Інакше кажучи, задання товщини сегментів границі починається з верхнього і далі за годинниковою стрілкою, закінчуючи лівим сегментом. Отже, запис:

P ( border-top-width: 1px; border-right-width: medium; border-bottom-width 2px; border-left-width: thin } буде еквивалентна правилу: P ( border-width: lpx medium 2px thin }