Як закруглити кути css

Як закруглити кути css

CSS3 дозволяє веб-майстру закругляти кути. У цій статті ви побачите всілякі ефекти, яких можна домогтися за допомогою цієї властивості.
Перед вивченням заокруглення кутів в css, рекомендую ознайомитися з попередніми уроками по темі:
Межі css і відступи - margin і padding.
border-radius - універсальна властивість, яке дозволяє добитися заокруглення кутів рамки елемента. Це властивість, однак, працює тільки в сучасних браузерах.
Для того, щоб закруглення працювало і в деяких старих версіях браузерів, використовують спеціальні приставки:

Для браузерів Chrome аж до 4.0, Safari до 5.0, iOS

Найбільша проблема з border-radius виникає в IE (працює з 9 версії), в Opera - c 10.5.
border-radius вказують для кожного боку кордону:

Значення border-radius:
  1. пікселі,
  2. відсотки від ширини блоку,
  3. em,
  4. значення можуть бути задані через слеш (/). Перше значення (до слеша) задає радіус для ширини, а друге - для висоти блоку.
приклад:




border-radius



border radius



результат:

Для того, щоб цей код працював в старих вервие Chrome і Firefox дублюємо властивості, прописуючи їх з приставками -webkit і -moz:
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px; Приклад завдання нерівномірного заокруглення кутів:

Скорочена запис border-radius: значення вказуються через пробіл або слеш. Можливо вказівку / *
  1. одного значення - в цьому випадку правило поширюється на весь блок. приклад:

  • двох - перше число вказує радіус заокруглення для верхнього лівого і нижнього правого, а друге - для верхнього правого і нижнього лівого. приклад:

    border-radius: 25px 5px;

  • трьох - перше - для верхнього лівого, друге - для верхнього правого і нижнього лівого і третє - для нижнього правого:

    border-radius: 25px 5px 10px;

  • чотирьох - для кожного кута окремо, починаючи з верхнього лівого і далі за годинниковою стрілкою. схема:
    Як закруглити кути css

    приклад:

    border-radius: 25px 5px 10px 1px;

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

    Схожі статті