Результаты предоставляются исключительно в информационных целях и могут содержать ошибки. Проверяйте важную информацию самостоятельно. Использование этого инструмента осуществляется на ваш страх и риск.
Что делает этот инструмент
Генератор Border Radius позволяет скруглить каждый угол блока отдельно с помощью четырёх ползунков — от 0 до 100 пикселей — и сразу видеть форму в превью в реальном времени. На выходе получается одно объявление border-radius, которое можно вставить в таблицу стилей. Изначально у всех четырёх углов значение 20px.
Значения записываются в том порядке, которого ожидает CSS: верхний левый, верхний правый, нижний правый, нижний левый — по часовой стрелке от верхнего левого угла. Одинаковые значения дают равномерно скруглённую карточку, разные — «облачка» реплик, вкладки, форму листа и другие асимметричные варианты. Сокращённая запись работает во всех современных браузерах без префиксов.
Когда использовать
- Нужно оформить карточки, кнопки и поля ввода в соответствии с радиусом скругления дизайн-системы.
- Нужно скруглить только верхние углы вкладки или нижние углы выпадающего списка.
- Нужно создать «облачко» чата с одним острым углом.
- Вы хотите быстро перебрать разные радиусы, не правя CSS и не перезагружая страницу.
Пример
Ввод
Верхний левый 24, верхний правый 24, нижний правый 4, нижний левый 24Вывод
border-radius: 24px 24px 4px 24px;Вопросы об этом инструменте
Как сделать идеальный круг?
Задайте квадратному элементу border-radius: 50%. Проценты считаются от размеров элемента, поэтому он остаётся круглым при любой ширине. Для кнопки-«таблетки» вместо этого используют большое значение в пикселях, например 999px.
Почему фон вылезает за скруглённые углы?
Дочерние элементы с собственным фоном могут перекрывать углы. Добавьте overflow: hidden скруглённому родителю или задайте дочернему элементу тот же радиус.
Может ли угол быть эллиптическим?
Да. CSS принимает два радиуса на угол через слеш, например border-radius: 50px / 25px. Генератор выводит привычную круговую форму — чтобы добавить второе значение, отредактируйте результат.
Влияет ли border-radius на тень?
Да. box-shadow повторяет скруглённый контур, поэтому углы совпадают. Соберите тень в генераторе теней и объедините оба объявления.
Этот инструмент бесплатный?
Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.
Как получить результат?
Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.