maque.org.ua - Українською про CSS

Цього разу говоритимемо про таку властивість у CSS як border.

Дозволю собі нагадати, що триває Конкурс відеоуроків до Дня незалежності України

До речі, цей допис є заключним у межах серії дописів про принцип коробки у CSS. Попередні дописи можна подивитись за цими посиланнями: Принцип коробки у CSS: загальні відомості (част. І), Принцип коробки у CSS: margin (частина ІІ) та Принцип коробки у CSS: padding (частина ІІI).

Border (обвідка) може мати різну ширину, колір та стиль.

maque.org.ua - Українською про CSS

Border-width визначає ширину обвідки. Може мати числові значення (em, %) або thin, medium, thick. Також можна використовувати скорочений стиль, який, як і у випадку з властивостями margin та padding, працює за годинниковою стрілкою:

border-top-width – визначає товщину обвідки вгорі;
border-right-width – визначає товщину обвідки праворуч;
border-bottom-width – визначає товщину обвідки праворуч;
border-left-width – визначає товщину обвідки праворуч.

Властивість border-style визначає стиль обвідки може мати такі значення:
a) none;
b) hidden;
c) dotted;
d) dashed;
e) solid;
f) double;
g) groove;
h) ridge;
i) inset;
j) outset.

За допомогою border-top-style, border-right-style тощо можна вказувати стиль відповідних сторін обвідки:
a) border-top-style;
b) border-right-style;
c) border-bottom-style:
d) border-left-style:

Властивість border-color вказує колір обвідки. Можна також вказувати колір відповідних сторін обвідки:
a) border-top-color;
b) border-right-color;
c) border-bottom-color;
d) border-left-color;

Якщо Ви зголосилися отримувати розсилку з maque.org.ua, то Ви отримали .PDF файл та файли у форматі HTML, які являють собою зразки тих властивостей та значень, які ми розглядали в усіх дописах серії “Принцип коробки у CSS”.

Разработка модулей Magento


Колос Віталій
Колос Віталій

Засновник і адмін цього блоґу.