Границі

Оновлено: 20.01.2023

Границі

Властивості, що встановлюють рамки і лінії навколо елементів.

• background-clip

  background-clip

  Визначає, як колір фону або фонова картинка має виводитися під межами. Ефект помітний за прозорих або пунктирних кордонів.

• border

  border

  Універсальна властивість border дає змогу одночасно встановити товщину, стиль і колір кордону навколо елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості. Для встановлення межі тільки на певних сторонах елемента, скористайтеся властивостями border-top, border-bottom, border-left, border-right.

• border-bottom

  border-bottom

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

• border-bottom-color

  border-bottom-color

  Встановлює колір кордону внизу елемента.

• border-bottom-left-radius

  border-bottom-left-radius

  Встановлює радіус заокруглення лівого нижнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

• border-bottom-right-radius

  border-bottom-right-radius

  Встановлює радіус заокруглення правого нижнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

• border-bottom-style

  border-bottom-style

  Встановлює стиль кордону внизу елемента.

• border-bottom-width

  border-bottom-width

  Встановлює товщину кордону внизу елемента.

• border-color

  border-color

  Встановлює колір кордону на різних сторонах елемента. Властивість дає змогу задати колір кордону одразу для всіх сторін елемента або тільки для зазначених.

• border-image

  border-image

  Використовується для відображення мальованої рамки навколо елемента. Товщина рамки задається властивістю border, при цьому якщо вказано border: 0, то рамка не виводиться. За інших значень border малюнок завжди має пріоритет. Фон, якщо він заданий через властивість background, відображається під рамкою.

• border-left

  border-left

  Властивість border-left дає змогу одночасно встановити товщину, стиль і колір лівої межі елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

• border-left-color

  border-left-color

  Задає колір кордону ліворуч від елемента.

• border-left-style

  border-left-style

  Встановлює стиль кордону ліворуч від елемента.

• border-left-width

  border-left-width

  Встановлює товщину кордону ліворуч від елемента.

• border-radius

  border-radius

  Встановлює радіус заокруглення куточків рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

• border-right

  border-right

  Властивість border-right дає змогу одночасно встановити товщину, стиль і колір правої межі елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

• border-right-color

  border-right-color

  Задає колір кордону праворуч від елемента.

• border-right-style

  border-right-style

  Встановлює стиль межі праворуч від елемента.

• border-right-width

  border-right-width

  Встановлює товщину межі праворуч від елемента.

• border-style

  border-style

  Встановлює стиль кордону навколо елемента. Припустимо задавати індивідуальні стилі для різних сторін елемента.

• border-top

  border-top

  Властивість border-top дає змогу одночасно встановити товщину, стиль і колір межі зверху елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

• border-top-color

  border-top-color

  Задає колір межі зверху елемента.

• border-top-left-radius

  border-top-left-radius

  Встановлює радіус заокруглення лівого верхнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

• border-top-right-radius

  border-top-right-radius

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

• border-top-style

  border-top-style

  Встановлює стиль кордону зверху елемента.

• border-top-width

  border-top-width

  Устанавливает толщину границы сверху элемента.

• border-width

  border-width

  Задає товщину рамки одночасно на всіх сторонах елемента або індивідуально для кожної сторони. Спосіб зміни товщини залежить від числа значень.

• outline

  outline

  Універсальна властивість, що одночасно встановлює колір, стиль і товщину зовнішньої межі на всіх чотирьох сторонах елемента. На відміну від лінії, що задається через border, у властивості outline є такі особливості:

• outline-color

  outline-color

  Вказує колір зовнішньої межі елемента. На відміну від лінії, що задається через border, лінія через властивість outline відображається навколо елемента, не впливаючи на ширину блоку або його положення.

• Іoutline-offset

  Іoutline-offset

  Встановлює відстань між рамкою, створеною за допомогою властивості outline, і краєм або межею елемента, доданою через border.

• outline-style

  outline-style

  Встановлює стиль зовнішньої межі елемента. На відміну від лінії, що задається через border, лінія через outline відображається навколо елемента, не впливаючи на ширину блоку або його положення.

• outline-width

  outline-width

  Визначає товщину зовнішньої межі елемента. На відміну від властивості border-width, для outline-width не можна задати межу для кожної сторони елемента індивідуально.