Путь задачи / от ввода к результату
Как сформировать border-radius в CSS
- 01
Выберите единицы
Установите «Единицы измерения» в «Пиксели» или «Проценты» — рабочая область начинается с пикселей. Пиксели постоянны при любом размере элемента; проценты масштабируются вместе с элементом — именно это делает возможными органичные асимметричные формы.
- 02
Настройте четыре угла
Двигайте «Верхний левый», «Верхний правый», «Нижний правый» и «Нижний левый» — каждый от 0 до 100 в выбранных единицах с шагом 1. Все четыре начинаются с 24 px, и карточка предпросмотра перерисовывается при каждом изменении.
- 03
Свяжите или развяжите углы
Оставьте «Связать все углы» включённым, чтобы менять все углы разом, или выключите, чтобы формировать каждый угол независимо. Рядом с переключателем сказано: пока углы связаны, изменение одного обновляет все четыре.
- 04
Попробуйте форму из примера
Нажмите «Загрузить пример» ради асимметричного эталона: «Верхний левый» и «Нижний правый» на 64 px, «Верхний правый» и «Нижний левый» на 12 px, без связи — диагональная форма «листа», привычная по карточкам и аватарам. «Сбросить» возвращает равномерные 24 px по умолчанию.
- 05
Проверьте сгенерированное объявление
Вывод всегда перечисляет четыре значения по часовой стрелке — верхний левый, верхний правый, нижний правый, нижний левый, — поэтому каждый угол остаётся явным при вставке. Значок статуса показывает CSS ВАЛИДЕН, а любой угол вне диапазона меняет его на ПРОВЕРЬТЕ ЗНАЧЕНИЯ и блокирует копирование.
- 06
Скопируйте или скачайте CSS
Нажмите «Копировать CSS», чтобы скопировать правило .rounded-card как четырёхзначное объявление border-radius, или «Скачать .css», чтобы сохранить его как toolars-border-radius.css. То же объявление работает для изображений, кнопок, карточек и любых других элементов.