Генератор скругления углов CSS: border-radius и предпросмотр

Как пользоваться

Выберите Единица: px для фиксированного радиуса или % для радиуса, который следует за размером блока.
Введите радиус каждого угла в полях Левый верхний, Правый верхний, Правый нижний и Левый нижний. Угол с 0 будет прямым.
Отметьте Эллиптические углы (отдельный вертикальный радиус), если угол должен быть шире своей высоты, и введите его вертикальный радиус.
Скопируйте объявление CSS и вставьте его в правило вашего элемента.

Как записываются четыре угла

Свойство border-radius принимает от одного до четырёх горизонтальных радиусов в порядке: левый верхний, правый верхний, правый нижний, левый нижний. Список из меньшего числа значений повторяет имеющиеся: при двух значениях первое относится к левому верхнему и правому нижнему углам, второе — к правому верхнему и левому нижнему. Вертикальный радиус пишется после косой черты в том же порядке.

Грамматика описана в спецификации CSS Backgrounds and Borders (на английском). Каждый радиус — это длина или процент от блока, а нулевой радиус не требует единицы измерения.

border-radius: левый-верхний правый-верхний правый-нижний левый-нижний / вертикальный-левый-верхний вертикальный-правый-верхний вертикальный-правый-нижний вертикальный-левый-нижний

Самая короткая запись

Инструмент не пишет каждое значение, которое сокращённая запись повторила бы сама. Если левый нижний угол равен правому верхнему, он не пишется; если правый нижний равен левому верхнему, третье значение тоже не пишется. Четыре одинаковых угла становятся одним значением, поэтому 12px 12px 12px 12px записывается как 12px.

Косая черта пишется, только если вертикальный радиус отличается от горизонтального. Без эллиптических углов каждый вертикальный радиус равен горизонтальному, поэтому косой черты нет.

Пример: карточка с эллиптическими углами

Задайте левому верхнему углу 40 px на 20 px, правому верхнему — 20 px на 10 px, правому нижнему — 40 px на 20 px, левому нижнему — 20 px на 10 px. Горизонтальные радиусы: 40, 20, 40, 20, их сокращённая запись — 40px 20px. Вертикальные: 20, 10, 20, 10, их запись — 20px 10px.

Объявление: border-radius: 40px 20px / 20px 10px;, а предпросмотр показывает углы, которые шире, чем высоки.

Частые вопросы

Зачем два набора чисел, разделённых косой чертой?

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

Что делает радиус в процентах?

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

Почему порядок левый верхний, правый верхний, правый нижний, левый нижний?

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

Проверяет ли инструмент радиус относительно размера блока?

Нет. Инструмент проверяет только то, что каждый радиус — число не меньше нуля и не больше лимита 1000 px или 100 %. Если два соседних радиуса в сумме больше стороны блока, браузер уменьшает их.

Сохраняется ли введённое или отправляется ли оно на сервер?

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

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..