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

Создайте форму за три шага

1. Задайте ширину и высоту от 1 до 2000 CSS-пикселей. Введите горизонтальный и вертикальный радиусы каждого угла в px или % либо примените пару верхнего левого угла ко всем.
2. Посмотрите на вписанный предпросмотр. Горизонтальные проценты используют ширину, вертикальные — высоту; смена единицы сохраняет число, но меняет его значение.
3. Выберите «Только радиус» или «CSS блока» и скопируйте полный результат. Если копирование недоступно, выделите текст только для чтения. При ошибке в поле текущего CSS-результата нет.

Два радиуса каждого угла

У каждого угла есть горизонтальный и вертикальный радиус. Косая черта в border-radius отделяет четыре горизонтальных значения от четырёх вертикальных; порядок в обеих группах: верхний левый, верхний правый, нижний правый, нижний левый.

Горизонтальные проценты используют ширину, вертикальные — высоту. В прямоугольном блоке 50% в обоих направлениях дают эллипс, не обязательно круг. Нулевой компонент делает угол прямым.

Если соседние радиусы перекрываются на стороне, браузер уменьшает все восемь компонентов с одним коэффициентом. Вычисленные и используемые пиксели описывают этот блок; их округлённые значения не заменяют исходный CSS.

Предпросмотр сначала размещает блок в заданных размерах, а затем визуально вписывает его. Один радиус может выглядеть иначе на блоке другого размера. CSS блока добавляет размеры, border-box, нулевые рамку и внутренний отступ, но не цвета предпросмотра.

Примеры со смешанными единицами

Для блока 240 на 120 горизонтальные значения 75%, 120px, 20%, 30px и вертикальные 40px, 60%, 60px, 50% дают общий коэффициент 0,8. Верхние горизонтальные радиусы становятся 144 и 96px, остальные компоненты тоже уменьшаются.

С теми же значениями в блоке 120 на 240 ограничивающий коэффициент равен 4/7. Форма меняется без преобразования процентов в фиксированные пиксели.

В блоке 240 на 120 радиусы 50% в обоих направлениях дают 120 и 60px. Все нулевые радиусы оставляют прямые углы.

Область применения и трактовка

Редактор поддерживает неотрицательные радиусы до 4000px или 1000% с не более чем тремя знаками после запятой. Он не разбирает произвольный CSS, calc(), var(), логические углы и другие единицы.

Используйте одну десятичную точку или запятую без разделителей тысяч. Смена единицы сохраняет число, а не вычисленную длину. Пустые, незавершённые или недопустимые поля убирают текущие предпросмотр и результат копирования.

Используемые пиксели и коэффициент — округлённые пояснения для этого блока. Браузер может округлять субпиксели; скопированный CSS сохраняет исходные значения и единицы.

Вписывание меняет только отображение, а не логический блок или экспортируемое правило. Для другого блока браузер пересчитает проценты и уменьшение.

Радиус формирует фон или рамку, но не всегда обрезает дочернее содержимое. Инструмент не предлагает загрузку изображений, перетаскивание, анимацию или правило overflow.

Локальное оформление без сохранения черновиков

Инструмент не добавляет загрузку, историю, ссылки или запросы с настройками. Копирование выполняется явно. Существующие службы сайта, расширения и ваши копии не охватываются общим обещанием удаления.