CSS Border Radius Generator

CSS border-radius generator

Use this border-radius generator to build rounded corners visually, compare common shapes, and copy a CSS declaration without remembering shorthand order. Adjust all corners together for consistent cards and buttons, or unlink them for asymmetric designs.

How CSS border-radius shorthand works

CSS reads four radius values clockwise:

1. Top-left
2. Top-right
3. Bottom-right
4. Bottom-left

When every corner matches, CSS allows one compact value. When corners differ, the generator returns all four values.

Shape	CSS
Square	border-radius: 0
Rounded	border-radius: 12px
Pill	border-radius: 9999px
Asymmetric	border-radius: 30px 10px 30px 10px

Common uses

• Buttons and badges with pill-shaped ends
• Cards and panels with consistent rounded corners
• Avatars and thumbnails with circular or asymmetric clipping
• Feature blocks with a distinctive editorial shape
• Navigation controls that need a softer visual hierarchy

Copy the generated declaration

Choose a preset or adjust each corner slider. Use Link corners while designing a uniform shape; disable it when one or more corners need different values. Copy the resulting declaration into a selector:

.card {
  border-radius: 12px;
}

<button class="cta">Start now</button>

<article style={{ borderRadius: "30px 10px 30px 10px" }}>
  Featured content
</article>

Pixels, percentages, and responsive shapes

The preview controls use pixel values, which are predictable for fixed-size UI elements. CSS also supports percentages and other length units when you need a radius that scales with an element:

.avatar {
  border-radius: 50%;
}

.responsive-card {
  border-radius: 4vw;
}

For a true circle, use a square element with border-radius: 50%. A large pixel radius creates a pill-like result on many rectangular elements, but it is not equivalent to a percentage in every layout.