CSS Border Radius Generator
This CSS border radius generator lets you design rounded corners visually and copy clean CSS in seconds. Drag the handles on a live shape, type exact values, or tap a preset, and the border-radius code updates as you go.
Use Simple mode for everyday rounded corners on buttons, cards, and inputs, or switch to Advanced mode for the full 8-value slash syntax that creates organic blobs, eggs, drops, and other freeform shapes. It is built for developers who want exact values and designers exploring decorative shapes alike.
How to Use
Set each corner
In Simple mode, use the sliders or number inputs for Top Left, Top Right, Bottom Right, and Bottom Left. Keep Lock All on to move every corner together, or unlock it to shape each corner on its own.
Drag on the preview
Grab the handles right on the live shape to round corners by feel. The preview, handles, and CSS output all update instantly as you drag.
Go advanced or pick a preset
Switch to Advanced mode for separate horizontal and vertical radius per corner and the H1 H2 H3 H4 / V1 V2 V3 V4 syntax, or open Presets to apply a ready-made shape. Hit Random shape for an instant blob.
Copy the CSS
The generated border-radius declaration is always shown below the preview. Click Copy CSS to send it to your clipboard and paste it straight into your stylesheet.
Features
Simple & Advanced Modes
Simple mode gives 4 corner controls for standard rounding; Advanced unlocks the full 8-value syntax with independent horizontal and vertical radius per corner.
Visual Drag Handles
Drag handles sit directly on the shape — 4 at the corners in Simple mode, 8 along the edges with guide lines in Advanced mode.
Pixel & Percent Units
Toggle between px and % at any time. Your current values are converted automatically so the shape stays consistent.
Lock All Corners
Lock to apply one value to all four corners at once, or unlock to fine-tune each corner independently.
12 Built-in Presets
One click applies Rounded, Pill, Circle, Leaf, Ticket, Drop, Egg, Blob 1–3, Badge, or Message — each shown as a mini shape preview.
Randomize Shapes
Random shape switches to Advanced mode and generates a fresh organic blob every time you click.
Adjustable Preview
Resize the preview width and height from 100px to 500px to see how your radius reads at different element sizes.
Color Pickers
Set the shape and background colors so you can preview the corners against the colors you actually use.
Nested Radius Calculator
Enter an outer radius and padding to get the correct inner radius for a child element, with a visual preview of the nesting.
Instant CSS & Copy
The CSS updates in real time, uses shorthand notation with the slash syntax when needed, and copies to your clipboard in one click.
Frequently Asked Questions
How do I make rounded corners in CSS?
Apply the border-radius property, for example border-radius: 12px;. With this generator you set each corner visually and copy the exact declaration, so you do not have to guess values or remember the corner order.
What do the four border-radius values mean?
When you give four values, they apply clockwise starting from the top left: Top Left, Top Right, Bottom Right, Bottom Left. The Simple mode controls are labeled with these exact corners, so the value you change matches the corner you see.
How do I make a perfect circle with border-radius?
Set every corner to 50% on a square element. The built-in Circle preset does this for you — just keep the preview width and height equal for a true circle rather than an oval.
How do I round only the top corners?
Turn off Lock All, then raise only Top Left and Top Right while leaving the bottom corners at 0. The output becomes something like border-radius: 16px 16px 0 0;, which is ideal for tabs and card headers.
What is the slash syntax in border-radius?
The full syntax is border-radius: H1 H2 H3 H4 / V1 V2 V3 V4. Values before the slash set the horizontal radius of each corner and values after set the vertical radius. When they differ, corners become elliptical, which is how organic blob shapes are made. Switch to Advanced mode to edit these eight values.
Should I use px or % for border-radius?
Use px for fixed-size elements like buttons and icons where you want an exact corner. Use % for responsive elements and organic shapes — 50% on a square makes a circle. The unit toggle converts your current values when you switch.
What is the Nested Radius Calculator for?
When a rounded child sits inside a padded, rounded parent, the inner radius should be smaller to look right. The formula is inner = max(0, outer − padding). Enter the outer radius and padding and the calculator returns the correct inner radius with a visual preview — for example, a 16px parent with 8px padding gives an 8px inner radius.
Can I use the generated CSS in any framework?
Yes. The output is plain, standards-based CSS that works in every modern browser. Paste it into a stylesheet, an inline style, or a CSS-in-JS solution without any changes.
No comments yet. Be the first to comment!