Border Radius Generator
Adjust border radius per corner with live preview — link or unlink corners.
border-radius: 12px;Border Radius Generator — What It Does
Visually adjust the CSS <code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1 rounded">border-radius</code> 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
The <code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1 rounded">border-radius</code> shorthand follows the clockwise box model: <strong class="text-zinc-700 dark:text-zinc-300">top-left → top-right → bottom-right → bottom-left</strong>. 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: <code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1 rounded">border-radius: 20px / 10px</code>.
CSS Border Radius Shorthand Explained
Common Mistakes
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.