Output
Output will appear here
Click in the output to select all text
CSS Border Radius Generator
Related tools
Featured
CSS Glassmorphism Generator
Generate a frosted-glass CSS effect with backdrop blur, translucent background, and border, ready to paste into your stylesheet.
Css glassmorphism generatorGlassmorphism css
Featured
CSS Box Shadow Generator
Build a CSS box-shadow value with offset, blur, spread, color, and inset controls, and copy the ready-to-use CSS.
Css box shadow generatorBox shadow generator
CSS Color Gradient Generator
Generate linear and radial CSS gradient code with multiple color stops and angle.
GradientCss gradient
This CSS Border Radius Generator builds a border-radius declaration with independent control over each of the four corners, so you can create anything from a subtly rounded card to an asymmetric "blob" shape or a fully circular element. Adjust each corner in pixels or percent, and the tool automatically outputs the shorthand single-value form when all corners match, or the full four-value form when they differ. Copy the result straight into your stylesheet. Everything runs locally in your browser. Scroll down to adjust each corner.
Features
- Independent control over all four corners
- Supports both pixel and percent units
- Automatically uses shorthand syntax when all corners match
- Instant CSS output as you adjust values
Why use this css border radius generator?
- Faster than hand-writing four-value border-radius syntax
- Makes asymmetric corner designs easy to dial in visually
- Fully private — nothing uploaded
- Free with unlimited use
Frequently asked questions
What's the order of corners in border-radius?
The CSS shorthand order is top-left, top-right, bottom-right, bottom-left — the same clockwise order this generator's fields follow.
Should I use px or %?
Pixels give a fixed, predictable radius regardless of element size; percent scales the radius relative to the element's own dimensions, useful for shapes that need to stay proportional as the element resizes.
How do I make a perfect circle?
Set all four corners to 50% on an element with equal width and height — that rounds each corner enough to meet in the middle, forming a circle.
Why does the output sometimes show one value instead of four?
When all four corners are equal, the generator uses the shorter single-value CSS shorthand (e.g. border-radius: 16px;) instead of repeating the same value four times.
Does border-radius work with background images or borders?
Yes, border-radius clips the element's background, border, and (with overflow: hidden) its content to the rounded shape.