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.
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.
Use px for general UI elements, and % for circular images or avatars.
The rounded corner values you set are reflected here in real time.
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.
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.