CSS Border Radius Generator
Visual CSS border-radius with elliptical mode, 6 unit types (px/%/em/rem/vw/vh), 8 shape presets, live preview. Free, client-side.
Design rounded corners with per-corner control, optional elliptical mode (separate horizontal/vertical radius), 6 unit types, 8 shape presets, live preview, and both shorthand and longhand output.
Vertical radius (elliptical mode)
CSS
HTML
How to Use CSS Border Radius Generator
- Drag the 4 corner sliders or click a quick-preset (square / circle / pill / etc.).
- Pick a unit: px (default), % (relative to element size), em / rem (relative to font size), or vw / vh (viewport).
- Toggle Elliptical mode to add a separate vertical radius per corner - useful for non-circular arcs (oval corners).
- Pick output style: shorthand (
border-radius: …) or longhand (4 separate properties). - Customize the preview's width / height / color to test against your actual layout.
- Copy CSS, copy HTML, or download as
border-radius.css.
Frequently Asked Questions
How do I round only the top corners, like a card or tab?
Unlink the corners and set just border-top-left-radius and border-top-right-radius, leaving the bottom two at 0. The shorthand version is border-radius: 12px 12px 0 0; (the four values go clockwise from top-left). This is the standard pattern for cards sitting on a flat edge, browser-style tabs, and bottom sheets in mobile layouts.
How do I make a perfect circle?
Click the Circle preset. Behind the scenes it sets all 4 corners to 50% and uses % units. Important: 50% makes a circle only on a square element (width = height). On a rectangle, 50% makes an oval. The preview width/height controls let you test both.
What’s the difference between px and %?
px: absolute pixel measurement. border-radius: 12px is always 12 pixels regardless of element size. %: relative to the element’s width (for horizontal radius) and height (for vertical, in elliptical mode). border-radius: 50% on a 200×200 box gives 100px radius (= circle).
What’s elliptical mode?
CSS border-radius can take two values per corner: horizontal and vertical radius. With same values, the corner is a quarter-circle. With different values, it’s a quarter-ellipse (stretched). CSS syntax: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4. Useful for asymmetric rounding like a teardrop or leaf shape.
Why might I want longhand output?
Longhand uses 4 separate properties (border-top-left-radius, etc.). Useful when you only want to override one corner (CSS cascade order matters) or for very explicit code in design-system stylesheets. Shorthand is more concise; longhand is more granular.
What does the “Pill” preset do?
Sets all corners to 999px – a value much larger than any reasonable element size. CSS clamps border-radius to half the smaller dimension, so the corners become fully rounded (semicircles). On a 200×60 button, this produces the classic pill shape with rounded short edges.
What if my radius exceeds the element size?
CSS clamps automatically. If you set border-radius: 100px on a 50×50 element, the effective radius becomes 25px (half the smaller side). No browser warnings; just the visual result you’d expect. This is why the Pill preset works regardless of element size.
Do rounded corners work with images?
Yes. img { border-radius: 50% } creates a circular avatar from any square image (combine with object-fit: cover for non-square sources). Border-radius applies to the visible area of all replaced elements including <video> and <iframe>.
Browser support?
Universal. border-radius shipped in all browsers by 2010. No vendor prefixes needed for current versions. Even IE 9+ supports it. The only way it fails is on text browsers like Lynx – which obviously don’t render rounded corners anyway.
Is anything uploaded?
No. The CSS is generated entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.