Border Radius Generator
Visual CSS border-radius generator with independent sliders for each corner. Live preview with presets for common shapes like pill, rounded, and more.
How to use
- 1 Drag the sliders to set the border radius for each corner independently — top-left, top-right, bottom-right, bottom-left.
- 2 Check "Link all corners" to keep all four corners synchronized as you adjust any single slider.
- 3 Type exact values in the number inputs for precise control, or click a preset (Slight, Rounded, Pill…) for quick configurations.
- 4 Copy the generated border-radius CSS and paste it directly into your stylesheet.
Key features
- Four independent sliders — one per corner, from 0px (sharp) to 200px (fully rounded)
- Link mode keeps all corners synchronized as you adjust any single slider
- Quick presets: None, Slight, Rounded, Pill, Top only, Bottom only — one click to apply
- Live preview shows the exact shape before copying the CSS
- Generates clean shorthand border-radius CSS ready for any stylesheet
What is border-radius?
The border-radius CSS property rounds the corners of an element's outer border edge. You can apply a single radius to all four corners or set a different value for each corner individually — enabling everything from subtly rounded buttons to fully pill-shaped badges.
This generator lets you visually experiment with border-radius values in real time. Use the sliders or numeric inputs to adjust each corner, toggle the link button to keep all corners synchronised, and copy the generated CSS with one click.
Common Use Cases
Buttons and cards
Rounded corners (4–12px) give buttons, cards, and modals a modern, approachable look — the foundation of almost every contemporary UI design system.
Badges and tags
Fully rounded pills (border-radius: 999px) create the signature look for badges, tags, status indicators, and user avatars.
Skeuomorphic depth
Different radii per corner can simulate perspective or lighting — a common technique in neumorphism and glassmorphism designs.
Progress indicators
Rounded corners on progress bars and range sliders make them feel polished and consistent with modern design language.
Input fields
Subtly rounded inputs (4–8px) feel friendlier than sharp rectangles, matching the look of most modern form components.
Image containers
Rounded corners on images, thumbnails, and video players soften the visual edge and create a more curated, gallery-like feel.
border-radius Syntax Reference
The border-radius shorthand accepts one to four values.
| Values | Result | Example |
|---|---|---|
| 1 value | Same radius applied to all four corners | border-radius: 12px; |
| 2 values | First = top-left & bottom-right, Second = top-right & bottom-left | border-radius: 12px 4px; |
| 3 values | First = top-left, Second = top-right & bottom-left, Third = bottom-right | border-radius: 16px 8px 4px; |
| 4 values | Top-left, top-right, bottom-right, bottom-left (clockwise) | border-radius: 16px 8px 4px 2px; |
Common Shapes & Their Values
Square (no rounding)
border-radius: 0;Slightly rounded
border-radius: 4px;Rounded card
border-radius: 12px;Pill / badge
border-radius: 999px;Top corners only
border-radius: 12px 12px 0 0;Bottom corners only
border-radius: 0 0 12px 12px;