logo

Developer

Border Radius Generator

Generate CSS border-radius values with live preview — linked or per-corner control, elliptical radii with slash syntax, and quick copy for CSS or Tailwind.

Border Radius Generator
Client-side onlyFast & private

Input

Linked • Uniform • px

*Squircle uses elliptical radii (%) for a soft, organic shape.

Same value for all corners
Use slash syntax (a / b)

Turn on Elliptical (X/Y) to edit Y radii.

Output

Rounded card

Adjust values on the left — border radius updates live.

CSS
/* Example */
.card {
  border-radius: 16px;
}
Tailwind (arbitrary)
<div className="[border-radius:16px]">...</div>

Uses Tailwind’s arbitrary properties ([border-radius:...]). For simple uniform radii you can also use utilities like rounded-lg.

How to use the Border Radius Generator

  1. Pick a preset (Rounded, Pill, Squircle) or start with your own values.
  2. Toggle Corners linked to switch between a single value and per-corner control.
  3. Enable Elliptical (X/Y) to use CSS’s a / b syntax for different horizontal and vertical radii.
  4. Choose px or % units and fine-tune each corner.
  5. Copy the generated CSS or Tailwind (arbitrary) and paste it into your project.

Tip: Use % with elliptical radii for fluid, organic shapes; use large px like9999px for perfect pills.