Who this helps
- Designers styling cards and buttons
- Developers learning corner order
Developer Design Utility
Border Radius Generator
Adjust CSS border-radius values for cards, buttons, images, and modals with a live preview, then generate shorthand CSS, individual properties, and inline style code.
Individual Corner Control
Set the top-left, top-right, bottom-right, and bottom-left radius values separately.
Live Preview
The selected radius values are instantly reflected in the Preview Card.
CSS Code Generation
Check shorthand CSS, individual properties, and inline style examples together.
Current Unit
px
Corner Mode
Same Value
Top Radius
24px / 24px
Bottom Radius
24px / 24px
Radius Settings
Use the same value for all corners or adjust each corner separately to create the UI shape you want.
Uncheck this option to set each of the four corners separately.
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
Use px for general UI elements, and % for circular images or avatars.
Live Preview
Border Radius
Preview Card
The rounded corner values you set are reflected here in real time.
Top
24px / 24px
Bottom
24px / 24px
Unit
px
Recommended Presets
Quickly apply commonly used card, button, and image shapes.
Basic UI Radius
Button / Image Shapes
Asymmetric / Accent Shapes
Generated Result
Use the code below in a CSS file, component style, or inline style.
Select your settings, then click Generate CSS Code.
Set rounded corners in the right order and unit
Adjust four corner radii together or separately, preview their shape and generate CSS. Choose px, rem or percent, then copy a uniform shorthand or a four-corner rule.
When to use this tool
- Give all card corners the same radius.
- Make one corner tighter for a speech-bubble shape.
From input to a checked result
- 1
Choose px, rem or percent.
- 2
Keep linked corners enabled to adjust all four with any corner control.
- 3
Turn linking off to edit each corner independently.
- 4
Generate CSS; later edits update the output.
- 5
Copy or download and test on the actual component dimensions.
Uniform card
- Input
- All four corners: 16 · unit: px
- Result
- border-radius: 16px;
Equal corners use one value in the main rule.
Tighter bottom-right corner
- Input
- Top-left 24 · top-right 24 · bottom-right 4 · bottom-left 24 · px
- Result
- border-radius: 24px 24px 4px 24px;
Four values run clockwise from top-left; the output also shows individual corner declarations.
rem conversion
- Input
- All four controls: 16 · unit: rem
- Result
- border-radius: 1rem;
Controls use a 16px conversion basis. At a 20px root font, 1rem renders as 20px.
How it works
Equal corners become one value; other shapes use four values in top-left, top-right, bottom-right, bottom-left order. Controls range from 0 to 120 for px/rem mode and 0 to 50 for percent mode. In rem mode the number is divided by 16 and rounded to two decimal places.
Limitations
- Separate horizontal and vertical radii using slash syntax are not generated.
- 50% makes an ellipse on a rectangle and a circle only on a square.
- Changing to percent reuses the numeric controls, with values capped at 50; it is not a pixel-to-percent conversion.
- The fixed preview does not provide width or background controls. Check image clipping and overflow in your project.
Your data
Values are processed in the browser without upload or saved history. CSS files contain the selected radii.
References
Related tools
- Box Shadow Generator
Add depth around the same shape.
- CSS Clamp Generator
Make a radius change with viewport width.
Frequently asked questions
Does changing one corner affect all corners?
With linked corners enabled, yes. Disable linking to give corners different values.
Why is rem not the raw slider number?
The tool divides the control value by 16: 16 produces 1rem. The actual size depends on the root font of the destination page.
Does rounding clip child images automatically?
Not necessarily. Apply the component's appropriate clipping or overflow rules separately.