CSS Border Radius Generator — visual
Visually craft CSS border-radius with four corner sliders, px or %, and elliptical corners — live preview and copy-ready code, in your browser.
🔒 Runs entirely in your browser. Your input and output are never sent to a server or stored — fully private.
About this tool
This border-radius generator lets you round the corners of a box visually and copy the exact CSS. Drag the sliders for all four corners together or shape each one on its own, switch between pixels and percentages, and even set elliptical radii with separate horizontal and vertical values. A live preview updates as you go, and the ready-to-paste border-radius rule appears beneath it. It is the quick way to design buttons, cards and avatars without writing the values by hand, and it all runs in your browser.
Frequently asked questions
What is the difference between a radius in pixels and one in percent?
A pixel radius is a fixed curve that stays the same size no matter how big the box is, which keeps corners consistent across elements. A percentage radius is relative to the box's own width and height, so it scales as the element grows. The classic trick is border-radius: 50%, which turns a square into a perfect circle and any rectangle into an ellipse — ideal for round avatars and pills.
What are elliptical corners and the slash in the CSS?
An elliptical corner uses two different radii — one horizontal, one vertical — so the curve can be wider than it is tall, or the reverse. In CSS those pairs are written with a slash, as in border-radius: 40px / 20px, where the values before the slash set the horizontal radii and those after set the vertical ones. It lets you create soft, stretched or asymmetric shapes that a single radius cannot, and the generator writes the syntax for you.
Can I copy the CSS straight into my project?
Yes. The tool outputs a standard border-radius declaration you can paste straight into your stylesheet, and the property is supported by every modern browser. Everything is calculated locally in your browser as you drag, so nothing you design is uploaded — the preview and the generated code are produced entirely on your device. Copy the rule, drop it into your CSS, and adjust the numbers later if you need to.