CSS Border Radius
Войдите или зарегистрируйтесь, чтобы сохранять инструменты в избранное
Генератор CSS border-radius с визуальным редактором
Простой режим — задаёт одинаковый радиус для горизонтальной и вертикальной оси каждого угла.
Расширенный режим — позволяет задать отдельно горизонтальный (H) и вертикальный (V) радиус для каждого угла. Синтаксис: tl-h tr-h br-h bl-h / tl-v tr-v br-v bl-v.
Связать все — при изменении любого угла все остальные автоматически принимают то же значение.
Генератор CSS Border-Radius онлайн — скругление углов
Визуальный редактор CSS border-radius для создания любых форм: от простых скруглённых углов до сложных органических форм (капля, лист, яйцо). Включает 7 готовых пресетов и случайную генерацию.
Синтаксис border-radius
Сокращённая запись: border-radius: 10px; — все четыре угла одинаковы.
Два значения: border-radius: 10px 20px; — верхний-левый/нижний-правый, верхний-правый/нижний-левый.
Четыре значения: border-radius: TL TR BR BL; — по часовой стрелке от верхнего левого.
Полная запись:
border-top-left-radius: 10pxborder-top-right-radius: 10pxborder-bottom-right-radius: 10pxborder-bottom-left-radius: 10px
Эллиптические скругления (slash syntax)
Синтаксис со слэшем задаёт разные горизонтальный и вертикальный радиусы: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;. Это создаёт органические формы, напоминающие яйца, капли и листья.
Готовые формы (пресеты)
| Форма | CSS |
|---|---|
| Круг | border-radius: 50% |
| Pill/Капсула | border-radius: 999px |
| Капля | border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% |
| Лист | border-radius: 0% 100% 100% 0% / 50% |
| Яйцо | border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% |
Часто задаваемые вопросы
Как сделать идеальный круг?border-radius: 50%; на элементе с одинаковыми шириной и высотой.
Можно ли анимировать border-radius?
Да. CSS переходы и анимации работают с border-radius: transition: border-radius 0.3s ease;. Это создаёт плавную морфинг-анимацию между формами.
Почему border-radius применяется к overflow?
border-radius создаёт clip-область. Для обрезки дочерних элементов добавьте overflow: hidden; к родительскому контейнеру.
Для теней используйте CSS Shadow, для градиентов — CSS Gradient.
Полезные статьи
WCAG контрастность: доступность цветов в веб-дизайне
Как проверить контрастность цветов по стандарту WCAG 2.1. Уровни AA и AAA, формула расчёта, рекомендации.
Markdown: синтаксис и возможности
Полное руководство по Markdown: форматирование текста, заголовки, списки, ссылки, изображения, таблицы и код.