Генератор border-radius
Заокруглюйте кути візуально — перетягуйте кути на прев'ю або перемкніться на органічні blob-форми.
Перетягуйте точки в кутах, щоб заокруглити їх
Горизонтальні радіуси
Вертикальні радіуси
Як працює генератор border-radius
Налаштовуйте заокруглені кути, перетягуючи прев'ю, і копіюйте чисте значення border-radius — зокрема для органічних blob-форм.
Перетягуйте кути
Візьміть будь-яку точку в куті прев'ю й потягніть усередину — радіус іде за курсором. Зв'яжіть усі кути для однакового радіуса або налаштовуйте кожен окремо.
Blob-форми
Перемкніться в режим blob із синтаксисом на 8 значень через скісну риску: окремі горизонтальний і вертикальний радіуси для кожного кута дають плавні органічні форми, популярні в сучасних головних блоках сайтів і аватарах.
Випадково
Один клік — і нова органічна blob-форма готова. Клацайте, доки не знайдете силует до душі, а потім доналаштуйте повзунками.
Чистий код
Згенероване значення скорочується до найкоротшої коректної форми: одне значення для однакових кутів, чотири значення або повний синтаксис зі скісною рискою для blob-форм.
Часті запитання
border-radius приймає горизонтальні й вертикальні радіуси, розділені скісною рискою: h1 h2 h3 h4 / v1 v2 v3 v4. Кожен кут стає чвертю еліпса замість чверті кола — саме так на чистому CSS створюють органічні blob-форми.
Пікселі дають фіксований розмір кута незалежно від розмірів елемента — найкраще для карток і кнопок. Відсотки масштабуються разом з елементом: 50% на квадраті дає ідеальне коло, і саме на відсотках тримаються blob-форми.
Ні — border-radius растеризує композитор, і це дуже дешево навіть у поєднанні з overflow: hidden чи трансформаціями. Його також можна безпечно анімувати через transition.
Коло: однакові ширина й висота плюс border-radius: 50%. «Пігулка»: будь-який прямокутник із border-radius щонайменше в половину його висоти — зазвичай пишуть просто 999px.