Как задать разные радиусы четырёх углов элемента в CSS

Введите значения для четырёх углов, задайте единицу и создайте CSS-декларацию border-radius. Поля идут в порядке: верхний левый, верхний правый, нижний правый, нижний левый.

Когда использовать генератор радиусов CSS

Если у элемента должны быть разные скругления, удобнее подготовить значение border-radius по отдельным углам, а не подбирать одну общую величину. Этот инструмент создаёт CSS-декларацию для скруглённых углов и принимает четыре значения: для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Такой порядок помогает сопоставить каждое число с нужной стороной элемента.

Сценарий подходит для карточек, кнопок, панелей и других элементов, где форма должна быть симметричной или намеренно асимметричной. Можно указать одну единицу для всех четырёх значений. Если значения углов не вводить, для каждого используется 10, а единицей по умолчанию служит px. Поэтому перед генерацией стоит решить, нужны ли вам одинаковые радиусы, разные радиусы или нулевые значения для отдельных углов.

Как получить декларацию border-radius

Откройте инструмент и найдите поля для четырёх углов. Распределяйте значения так: верхний левый, верхний правый, нижний правый, нижний левый. Например, для карточки с более сильным скруглением сверху можно ввести 24, 24, 8 и 8 в этом порядке.
Выберите или укажите единицу измерения, которая должна сопровождать введённые значения. Инструмент добавляет переданную единицу к каждому значению в создаваемой декларации. Если единицу не задавать, используется px.
Проверьте, что числа стоят в нужных полях. Порядок важен: перестановка двух значений изменит соответствующие углы в CSS-декларации. Если один из углов должен оставаться прямым, используйте для него 0, а остальные поля заполните нужными величинами.
Запустите создание результата с помощью доступного элемента управления. Для равномерного варианта можно задать одно и то же значение во всех четырёх полях. Для асимметричного варианта укажите четыре разных значения. Инструмент возвращает успешный результат с созданной декларацией для равномерных, асимметричных и нулевых значений.
Скопируйте полученную декларацию в правило нужного элемента и проверьте, что порядок углов соответствует вашей задумке. Инструмент выдаёт именно декларацию border-radius, поэтому селектор, фигурные скобки и остальные свойства стиля нужно добавить в собственное CSS-правило.

Как проверить полученный результат

В готовой декларации четыре значения идут в том же порядке, что и поля: верхний левый угол, верхний правый, нижний правый, нижний левый. Это позволяет проверить результат без догадок: сопоставьте каждую часть значения с исходным полем и убедитесь, что после числа используется выбранная единица. Для одинаковых вводов значения в декларации будут равномерными по углам; для разных вводов порядок сохранит асимметрию. Нулевое значение останется частью результата и обозначит угол без радиуса.

Если поля оставить без значений, результат строится с исходным значением 10 для каждого угла и единицей px. Это удобно как начальная настройка, но для макета с другими размерами лучше ввести собственные значения. Отдельно проверьте единицу: инструмент добавляет переданный текст к каждому углу, поэтому итоговая запись должна соответствовать синтаксису, который вы намерены использовать в CSS.

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

Практический пример

Вы оформляете карточку, у которой верхние углы должны быть скруглены сильнее нижних.

Для карточки с более сильным скруглением сверху введите четыре значения 24, 24, 8 и 8, выберите px и создайте декларацию. Затем сопоставьте четыре части результата с полями.

Успешный результат содержит CSS-декларацию border-radius с четырьмя значениями в порядке от верхнего левого угла к нижнему левому и с добавленной единицей.

Ограничения

Результат представляет собой CSS-декларацию border-radius, а не полный stylesheet: селектор, фигурные скобки и другие свойства нужно добавить отдельно.

Частые ошибки

Причина: значения введены не в порядке «верхний левый, верхний правый, нижний правый, нижний левый», либо единица указана не так, как требуется для вашей CSS-записи. Исправление: сверьте поля по кругу, повторно выберите или введите единицу и создайте декларацию заново.

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

Можно ли задать разные радиусы для всех четырёх углов?

Да, если под «разными» имеются в виду отдельные значения для четырёх углов. Инструмент принимает их в порядке от верхнего левого угла к нижнему левому и переносит этот порядок в декларацию.

Что произойдёт, если оставить поля пустыми?

Если значения углов не вводить, для каждого используется 10, а единицей служит px. При необходимости замените значения и единицу перед созданием результата.

Можно ли оставить один угол без скругления?

Да, нулевое значение можно использовать для отдельного угла. Оно сохраняется в созданной декларации вместе с переданной единицей, поэтому проверьте порядок полей и итоговую запись.