Различия

Показаны различия между двумя версиями страницы.

--- border [2023/09/18 19:06]
tro создано
+++ border [2023/09/18 19:09] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== border ======
 Складова властивість border контролює ширину, стиль і колір рамки елемента
+Можна задати індивідуальні стилі з кожного боку елемента.
   * **Ширина** рамки визначається в пікселях.
   * **Стиль** — одне значення з набору можливих значень, найпоширенішими значеннями є solid, dashed і dotted.
   * **Колір** задається в будь-якому форматі, зазвичай HEX
+<code>
+border: 5px solid orangered;
+</code>
+Також є властивості, що окремо задають значення рамки. Їх можна застосовувати в якості альтернативи властивості border, або щоб при зміні лиш одного значення рамки не дублювати інші властивості.
+  * border-width: значення;
+  * border-style: значення;
+  * border-color: значення;
+Наприклад, якщо при ховері змінюється лише колір рамки елемента.
+<code>
+.box {
+  width: 200px;
+  height: 200px;
+  border: 5px solid orangered;
+}
+.box:hover {
+  border-color: cyan;
+}
+</code>