Генератор border-radius

Як користуватися генератором border-radius

1. Перетягуйте точки на краях попереднього перегляду. Кожна кольорова точка задає горизонтальний радіус кута, а якщо позначено Еліптичні кути (8 значень), білі точки задають вертикальні радіуси.
2. Або введіть точні значення в розділі Кути: Лівий верхній, Правий верхній, Правий нижній і Лівий нижній, у кожному є поля Горизонтальний і Вертикальний.
3. Виберіть Одиниця: % (відсоток від розміру блока) або px (пікселі). Під час перемикання поточні значення перераховуються, тож форма не змінюється.
4. Задайте Ширина блока (px) і Висота блока (px) відповідно до вашого елемента, а за допомогою Усі кути заокругліть усі кути одразу.
5. Спробуйте Шаблони (Заокруглений, Пігулка, Коло, Листок, Крапля, Яйце, Квиток і три плями) або натисніть Випадкова пляма, щоб отримати органічну форму.
6. Позначте Окремі властивості, якщо вам більше до вподоби чотири оголошення border-*-radius, а потім скопіюйте CSS-код кнопкою Копіювати.

Клавіатура: наведіть фокус на точку й натискайте стрілки, щоб змінювати її радіус на один крок (на 10 із Shift).

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.

Синтаксис border-radius

border-radius приймає від одного до чотирьох значень у порядку: лівий верхній, правий верхній, правий нижній, лівий нижній. Як і з полями, відсутні значення беруться від протилежного кута: border-radius: 10px 20px заокруглює лівий верхній і правий нижній кути на 10px, а решту два – на 20px. Інструмент завжди записує найкоротшу рівнозначну форму.

Насправді кожен кут – це чверть еліпса з двома радіусами. Скісна риска відокремлює горизонтальні радіуси від вертикальних, тож значень може бути до восьми:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Перед рискою – горизонтальні радіуси чотирьох кутів, після неї – вертикальні. Якщо обидва списки однакові, частину після риски опускають.

Пікселі чи відсотки?

• px дає однакову кривизну за будь-якого розміру елемента. Це правильний вибір для кнопок, карток і полів введення: border-radius: 8px.
• % відраховується від елемента: горизонтальні радіуси від його ширини, вертикальні від висоти. 50% перетворює квадрат на коло, а прямокутник на еліпс. Саме відсотки дозволяють плямам масштабуватися разом з елементом.

Для кнопки у формі пігулки візьміть радіус у пікселях не менший за половину висоти. Шаблон Пігулка робить саме це для введеного вами розміру блока, а величезне значення на кшталт 999px теж спрацює.

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

Органічні форми

Шаблони плям і Випадкова пляма використовують вісім відсотків, у яких дві точки на кожній стороні в сумі дають 100 %. Тоді криві сходяться точно, і форма виглядає як гладкий камінець. Анімуйте перехід між двома плямами за допомогою CSS transition для border-radius, щоб отримати ефект «перетікання».