CSS-свойство border-radius закругляет углы элементов. Хотя простые значения создают равномерные углы, CSS поддерживает указание разных значений для каждого угла. Этот визуальный инструмент позволяет вам регулировать каждый угол независимо с помощью слайдеров, предпросматривать результат в реальном времени и копировать сгенерированный CSS-код.
border-radius: 16px;
Используйте слайдеры или числовые поля ввода для установки радиуса границы для каждого угла независимо. Элемент предпросмотра обновляется в реальном времени, показывая точную форму. Доступны предустановки для распространённых форм (круг, пилюля, закруглённый прямоугольник, blob). Копируйте сгенерированный CSS-код одним кликом.
Border radius используется для создания закруглённых кнопок и полей ввода, круглых аватаров и изображений профилей, тегов и бейджей в форме пилюль, чат-пузырей с органичными формами, компонентов карточек с тонким закруглением, пользовательских декоративных форм без изображений, стрелок tooltip'ов и креативных blob-форм с использованием продвинутого синтаксиса эллиптического радиуса. Это одно из наиболее часто используемых CSS-свойств в современном UI-дизайне.
CSS-сокращение border-radius принимает 1-4 значения (все углы / вертикальные | горизонтальные пары / индивидуальные углы). Для эллиптических углов используйте синтаксис со слешем: border-radius: 50px / 30px создаёт эллиптические кривые. Индивидуальные свойства: border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius. Значения могут быть в px, %, em или rem. Процентные значения относительны размерам элемента, и 50% на квадрате создаёт круг.
border-radius принимает от 1 до 4 значений для равномерного или индивидуального закругления углов. Одно значение применяется ко всем углам, два значения применяются к top-left/bottom-right и top-right/bottom-left, четыре значения применяются к каждому углу по часовой стрелке от top-left.
Установите border-radius: 50% на квадратный элемент (равная ширина и высота). Значение 50% создаёт идеальный круг. Для прямоугольного элемента 50% создаёт эллипс.
Да. Используйте полные свойства: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Или используйте сокращение: border-radius: 10px 20px 30px 40px (top-left, top-right, bottom-right, bottom-left).
Конвертация утилитарных классов Tailwind CSS в стандартные свойства обычного CSS.
Генерируйте гармоничные цветовые палитры с использованием алгоритмов теории цвета.
Проверьте, соответствуют ли цветовые комбинации требованиям WCAG 2.1 по контрастности для доступности.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты