Генератор Border Radius

Заокруглюйте кожен кут повзунками, створюйте органічні асиметричні форми в еліптичному режимі та миттєво копіюйте CSS.

Шаблони
Кути
Усі кути
24px
CSS
Перетягуйте повзунки, щоб заокруглити кути.

Кожен кут відмальовується прямо у вашому браузері. Жодні налаштування не завантажуються на BroBroGo.

Поширені запитання

Як працюють чотири кути та різниця між px і %?

Чотири повзунки відповідають за годинниковою стрілкою за верхній лівий, верхній правий, нижній правий та нижній лівий кути. У пікселях кут заокруглюється на фіксовану величину; у відсотках — відносно розмірів блоку (горизонтальний відсоток залежить від ширини, а вертикальний — від висоти, тому 50% перетворюють квадрат на коло).

Що робить еліптичний режим?

Якщо цей режим вимкнено, кожен кут є чвертю кола з єдиним радіусом. Увімкніть його, і кожен кут отримає окремий горизонтальний та вертикальний радіуси — саме так створюються м’які, органічні форми «плям» (blobs). Генератор автоматично запише для вас значення через скісну риску (slash) і повернеться до короткої форми, щойно кути знову стануть круглими.

Як зробити ідеальне коло чи кнопку-пігулку?

Зв’яжіть кути, перемкніться на відсотки та встановіть 50%: квадрат перетвориться на коло. Для кнопкоподібної форми (пігулки) залиште пікселі та перетягніть кутовий повзунок за межі половини висоти кнопки — сторони залишаться повністю заокругленими за будь-якої ширини. Пресет «Коло» налаштовує перший варіант в один клік.

Генератор CSS Cubic BezierКеруйте двома маркерами для створення кривої плавности, порівнюйте рух точок наживо та копіюйте готове значення cubic-bezier().Генератор Box ShadowКеруйте параметрами box-shadow за допомогою повзунків, комбінуйте шари для глибини та миттєво копіюйте готовий код CSS.Генератор градієнтівСтворюйте лінійні, радіальні або конічні градієнти, додавайте колірні точки, налаштовуйте напрямок та копіюйте CSS в один клік.Генератор FlexboxНалаштовуйте flex-контейнер та його елементи за допомогою візуальних інструментів, дивіться на результат наживо та копіюйте CSS в один клік.Генератор CSS GridЗадавайте кількість стовпців та рядків, виділяйте мишкою області для розміщення елементів та копіюйте готовий CSS та HTML-код.Калькулятор CSS clamp()Вкажіть розміри для малих і великих екранів та отримайте адаптивне значення clamp() для плавного масштабування шрифтів, відступів чи інтервалів.Конвертер кольорівКонвертуйте кольори між HEX, RGB, HSL, HSV, CMYK та LAB — змінюйте будь-яке поле, а інші оновлюватимуться на льоту.