Create perfect rounded corners in seconds with this CSS Border Radius Generator. Adjust each corner visually, preview changes in real time, and copy clean CSS for buttons, cards, images, and containers.

What is a CSS Border Radius Generator?

A CSS Border Radius Generator is a visual tool that lets you set the border-radius property for one or more corners without manual coding. It outputs valid CSS you can paste into any stylesheet or inline style.

How it works

• Move sliders for top-left, top-right, bottom-right, bottom-left values.
• Toggle uniform radius for pill shapes and circles.
• Switch to elliptical mode using slash syntax for advanced shapes.

Copy-ready CSS examples

• Uniform:
  • border-radius: 16px;
• Individual corners:
  • border-radius: 8px 12px 16px 20px;
• Elliptical:
  • border-radius: 40px 20px / 10px 30px;
• Specific corners:
  • border-top-left-radius: 12px;
  • border-top-right-radius: 0;
  • border-bottom-right-radius: 24px;
  • border-bottom-left-radius: 8px;

When to use px vs %

• px gives consistent radii across breakpoints for fixed-size UI like buttons.
• % scales with element size and is ideal for circles and ovals (use 50% for perfect circles on square boxes).

Shorthand vs longhand

• Shorthand with 1–4 values:
  • 1 value: all corners.
  • 2 values: top-left/bottom-right, top-right/bottom-left.
  • 3 values: top-left, top-right/bottom-left, bottom-right.
  • 4 values: top-left, top-right, bottom-right, bottom-left.
• Longhand targets specific corners for precise control or overrides.

Elliptical radius (slash syntax)

Use slash syntax to define horizontal/vertical radii per corner for organic and asymmetric shapes.

• Example: border-radius: 32px 12px 48px 8px / 16px 32px 12px 24px;

Use cases and patterns

• Pill buttons: border-radius: 9999px; or 50% height.
• Circular avatars: width = height, border-radius: 50%;
• Cards: subtle rounding like 6px–12px for modern UI.
• Badges/chips: 9999px or 1.5–2x line-height.

Best practices

• Keep radii consistent within a component system for visual rhythm.
• Use tokens (e.g., –radius-sm: 6px) for maintainability.
• Favor smaller radii for dense data UI and larger radii for marketing sections.

Accessibility and UX tips

• Rounded corners can increase perceived affordance and friendliness.
• Ensure focus outlines remain visible on rounded elements by pairing with outline-offset or box-shadow.

Troubleshooting

• Radius not visible? Check background color, border, and element size.
• Child content overflowing sharp corners? Add overflow: hidden; to the rounded container.
• Jagged edges on images? Use object-fit: cover; on img within a rounded container.

Works with frameworks and builders

• Tailwind:
  • rounded, rounded-md, rounded-lg, rounded-full
• Bootstrap:
  • rounded, rounded-1–5, rounded-circle, rounded-pill
• Page builders: Paste generated CSS into custom CSS fields or use native “Border radius” controls for widgets.

Performance considerations

• Border-radius has minimal performance impact versus SVG clipping or complex filters.
• Prefer CSS radius over heavy images or masks for scalable, responsive shapes.

FAQs