Border Radius Generator

Adjust border radius per corner with live preview — link or unlink corners.

Color
Size
border-radius: 12px;

Border Radius Generator — What It Does

Visually adjust the CSS border-radius of each corner independently or in sync. A live preview updates as you drag, and the exact CSS output is shown below — ready to copy into your stylesheet.

Common Border Radius Patterns

  • Rounded rectangle — border-radius: 8px or 12px — standard for cards, buttons, inputs
  • Pill / capsule — border-radius: 9999px — fully rounded sides for tags and badges
  • Perfect circle — border-radius: 50% on a square element — avatars, icons
  • Squircle (iOS-style) — Asymmetric per-corner values around 25–30% to mimic Apple's app icon shape
  • Speech bubble — Three equal corners + one sharp corner (0) with a pointed tail

CSS Border Radius Shorthand Explained

The border-radius shorthand follows the clockwise box model: top-left → top-right → bottom-right → bottom-left. With two values, the first applies to top-left and bottom-right; the second to top-right and bottom-left. You can also specify separate x/y radii using a slash: border-radius: 20px / 10px.

Common Mistakes

  • Using border-radius: 50% on a rectangle — you get an ellipse, not a circle; use 50% only on squares
  • Applying border-radius without overflow: hidden — child elements can visually bleed outside rounded corners
  • Inconsistent radius values across a design system — standardize on a spacing scale (4px, 8px, 12px, 16px)

Frequently Asked Questions

What is border-radius in CSS?
The border-radius property rounds the corners of an element's border box. A single value applies to all four corners; four values apply to top-left, top-right, bottom-right, and bottom-left respectively.
How do I make a perfect circle with border-radius?
Set border-radius: 50% on an element with equal width and height (a square). The 50% radius will round all corners into a circle. Example: width: 100px; height: 100px; border-radius: 50%;
What is a CSS squircle?
A squircle has rounded corners like iOS app icons — more rounded than a rectangle but less circular than a circle. In CSS, this is approximated with border-radius values around 25–35% or specific corner values.
Can I set different x and y radii for each corner?
Yes, using the elliptical syntax: border-radius: 10px / 20px sets horizontal radius to 10px and vertical to 20px for all corners. You can specify all 8 values for full control of the oval rounding.
What is the shorthand order for four-value border-radius?
The four values follow clockwise order: top-left, top-right, bottom-right, bottom-left. This matches other CSS box properties like margin and padding.