Бесплатный онлайн предпросмотр CSS border-radius. Индивидуальная настройка каждого угла с предпросмотром. Копирование кода. Обработка в браузере.
Нажмите Ctrl+D, чтобы добавить страницу в закладки
Предпросмотр Border Radius — это бесплатный онлайн-инструмент, который визуально настраивает свойство CSS border-radius.
Примените border-radius: 50% к квадратному элементу, чтобы создать идеальный круг. Установите все четыре угла на 50%.
Да, border-radius может иметь четыре отдельных значения в порядке: верхний левый, верхний правый, нижний правый, нижний левый. Это позволяет создавать уникальные асимметричные формы.
Шесть-двенадцать пикселей для кнопок и восемь-шестнадцать для карточек подходят большинству интерфейсов. Важнее точного числа последовательность: если на одном экране у кнопок и полей ввода разные радиусы, макет выглядит неопрятно. Когда внутри карточки лежит изображение, задайте внутреннему элементу чуть меньший радиус, чем внешнему, иначе две дуги будут заметно спорить друг с другом.
50% означает «половина каждой стороны», поэтому, если элемент не квадратный, горизонтальный и вертикальный радиусы различаются и получается эллипс. Ради настоящего круга задайте width и height одинаковыми или добавьте aspect-ratio: 1. А для «пилюли» на кнопке, ширина которой зависит от текста, вместо 50% возьмите большое фиксированное значение вроде 9999px — тогда торцы при любой высоте останутся ровными полукругами.