Choose Same or Custom Corners
Keep all corners linked for a simple rounded card, or turn sync off to edit each corner separately.
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.
How to Use
Adjust Radius Values
Move the sliders, choose px, %, or rem, and apply presets for cards, pill buttons, circular images, or asymmetric shapes.
Check the Live Preview
Watch the preview card update instantly so you can judge whether the shape fits your UI before copying code.
Generate and Copy CSS
Generate shorthand, individual property, and inline style examples, then copy or download the CSS result.
Help
When should I use a Border Radius Generator?
Use it when creating UI elements with rounded corners, such as cards, buttons, images, modals, and input fields. You can adjust values while checking the preview, which speeds up design work.
border-radius Value Order
The border-radius shorthand is applied in this order: top-left, top-right, bottom-right, and bottom-left.
- First value: Top Left
- Second value: Top Right
- Third value: Bottom Right
- Fourth value: Bottom Left
Recommended Values
- Small buttons: 8px ~ 12px
- General card UI: 16px ~ 28px
- Large SaaS-style cards: 24px ~ 36px
- Pill buttons: 999px
- Circular images: 50%
Difference Between px, %, and rem
px is suitable for fixed corner sizes, while % is used for circular images or ratio-based shapes. rem scales relative to the site's base font size.
How do I make a perfectly circular image?
Apply border-radius: 50%; to a square image or box to create a circular shape.
What value should I use for a pill button?
Use a sufficiently large value such as 999px to create a pill-shaped button with fully rounded sides.
What happens when each corner has a different value?
You can create more distinctive UI shapes such as diagonal cards, speech-bubble style cards, or asymmetric image boxes.