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

Примените свойство border-radius к элементу. Одно значение, например border-radius: 12px;, скругляет все четыре угла одинаково. Перемещайте ползунки здесь, следите за предпросмотром в реальном времени и копируйте сгенерированное правило прямо в свою таблицу стилей.

Косая черта отделяет горизонтальные радиусы от вертикальных, создавая эллиптические углы вместо круговых. Форма записи: border-radius: h-tl h-tr h-br h-bl / v-tl v-tr v-br v-bl. Включите «Эллиптические углы», чтобы задавать каждую ось независимо, и инструмент сам запишет синтаксис с косой чертой.

Пиксели задают фиксированный радиус угла независимо от размера элемента — это лучший выбор для кнопок и карточек. Проценты задаются относительно размеров элемента: 50% на квадрате превращает его в круг, что удобно для «таблеток» и аватаров, которым нужно масштабироваться. Переключите единицы вверху инструмента.

Нет. Генератор работает полностью в вашем браузере. Предпросмотр отрисовывается локально обычным CSS, и ничего из введённого вами не отправляется на сервер и не сохраняется.