Властивість border HTML дозволяє визначати стиль, ширину і колір межі елементу. Межі елементів можуть виконувати як декоративну, так і практичну функцію.
стиль кордону
Властивість border-style дозволяє визначити тип (стиль) кордону.
Це властивість приймає різні значення:
- dotted - межа в точку;
- dashed - межа в штрих;
- solid - цілісна межа;
- double - подвійний кордон;
- groove - тривимірна межа. Ефект залежить від того, яким буде значення властивості border-color;
- ridge - тривимірна межа. Ефект залежить від того, яким буде значення властивості border-color;
- inset - тривимірна втоплена межа. Ефект залежить від того, яким буде значення властивості border-color;
- outset - тривимірна опукла межа. Ефект залежить від того, яким буде значення властивості border-color;
- none - відключення;
- hidden - приховані кордону.
У властивості HTML border style може бути від одного до чотирьох значень (для верхньої, правої, нижньої і лівої сторони).
Важливо! Жодне з наведених вище властивостей border HTML не вступить в силу, якщо не встановлено значення border-style!
Border Width
Властивість border-width визначає ширину кордону по кожній із чотирьох сторін елемента.
Ширину можна вказувати як в одиницях виміру (px, pt, cm, em і т. Д.), Так і за допомогою ключових слів: thin. medium або thick.
У властивості border-width може бути від одного до чотирьох значень (для верхньої, правої, нижньої і лівої сторони).
Border Color
Властивість HTML border-color використовується, щоб вказати колір кордону для однієї з чотирьох сторін елемента.
Колір можна вказувати декількома способами:
- Назвою - вписується назва кольору (наприклад, red);
- Hex - вказується hex-значення кольору (наприклад, # FF0000);
- RGB - вказується RGB-значення кольору (наприклад, rgb (255,0,0));
- transparent (прозора).
У властивості border-color може бути від одного до чотирьох значень (для верхньої, правої, нижньої і лівої сторони).
Якщо не виставити властивість border-color. то кордону наслідуватимуть колір елемента.
Стилізація кордонів по-окремо
В CSS є властивості border HTML для визначення стилю кожного боку елемента (top, right, bottom і left).
Подібного результату можна досягти і в такий спосіб:
Як це працює
Якщо у властивості HTML border style буде чотири значення:
- border-style: dotted solid double dashed;
- верхня межа має значення dotted;
- права межа має значення solid;
- нижня межа має значення double;
- ліва межа має значення dashed.
Якщо у border-style буде три значення:
- border-style: dotted solid double;
- верхня межа має значення dotted;
- права і ліва кордону мають значення solid;
- нижня межа має значення double.
Якщо у border-style буде два значення:
- border-style: dotted solid;
- верхня і нижня межі мають значення dotted;
- права і ліва кордону мають значення solid.
Якщо у HTML border style буде одне значення:
- border-style: dotted;
- то всі чотири кордони будуть мати значення dotted.
У прикладах, наведених вище, ми використовували властивість border-style. Але врахуйте, що ті ж правила застосування стосуються і border-width. і border-color.
Скорочена властивість border
Як видно з прикладів, при стилізації кордонів елементів потрібно застосовувати досить багато різних властивостей. Щоб скоротити код, можна використовувати спеціальне властивість border:
Це ж властивість можна використовувати і для стилізації кордонів по окремим сторонам елемента.
ліва межа
Нижня границя
закруглені кордону
Властивість HTML border radius дозволяє оформити елемент межами із закругленими кутами.
Примітка: властивість border-radius не підтримуються в IE8 і більш ранніх версіях цього браузера.
Як одним виразом стилізувати відразу все верхня межа
Стилізуємо нижню межу елементів
Встановлюємо ширину лівої межі
Вказуємо колір чотирьох кордонів
Вказуємо колір тільки правої межі елемента
Переклад статті "CSS Borders" був підготовлений дружною командою проекту Сайтобудування від А до Я.