CSS Border Radius Generator

What is CSS Border Radius?

The CSS border-radius property rounds the corners of an element's border box. It works on any HTML element — divs, buttons, images, inputs, cards — and accepts pixel values, percentages, or em/rem units. A single value rounds all four corners equally. Individual values let you create asymmetric shapes.

Border radius is one of the most used CSS properties in modern web design. It defines the visual softness of UI elements, from subtle 4px card rounding to full pill buttons and circular avatars.

Border Radius Syntax

The shorthand property accepts one to four values, following the same top-right-bottom-left clockwise order as other CSS shorthand properties:

Individual Corner Properties

Instead of the shorthand, you can set each corner separately using longhand properties. This is useful when you only want to round specific corners and leave others sharp:

Percentage Values

When you use a percentage, the radius is calculated relative to the element's dimensions. This is how the circle trick works:

On a non-square element, border-radius: 50% creates an ellipse rather than a circle, since the horizontal and vertical radii are proportional to different dimensions.

Elliptical Border Radius

The border-radius property supports an advanced slash syntax that sets different horizontal and vertical radii for each corner. This creates elliptical curves instead of circular ones:

Common Border Radius Values and When to Use Them

• 0px — Sharp corners. Used for industrial, brutalist, or technical UI styles.
• 2px – 4px — Subtle rounding. Almost imperceptible but softens the UI slightly.
• 6px – 8px — Standard card and panel rounding. The most common value in modern design systems.
• 12px – 16px — Visibly rounded. Common for buttons, badges, and modal dialogs.
• 24px – 32px — Heavily rounded. Used in friendly, consumer-facing products.
• 9999px or 50% — Pill shape on wide elements, circle on square elements.

How to Make Specific Shapes

Pill Button

Circle Avatar

Tab Shape (rounded top only)

Chat Bubble

Border Radius and overflow: hidden

When you apply border radius to a container that holds an image or background, you often need to add overflow: hidden to prevent the child content from breaking out of the rounded corners:

Browser Support

The border-radius property is supported by every modern browser and has been since IE9. No vendor prefixes are needed. The elliptical slash syntax is also universally supported in modern browsers.

How to Use This Generator

1. Uncheck Link all corners to control each corner independently
2. Use the preset buttons for common values, or drag the sliders for precise control
3. Watch the live preview update in real time
4. Click Copy CSS — the output automatically uses the shortest valid shorthand

Frequently Asked Questions

What is the difference between border-radius: 50% and border-radius: 9999px?

On a square element, both produce a circle. On a wide element like a button, 50% creates an ellipse. 9999px clamps to the element's dimensions and always produces a pill shape regardless of width. Use 9999px for pill buttons, 50% for circles.

Can I animate border-radius with CSS?

Yes. border-radius is an animatable property. You can use CSS transitions or animations to morph between shapes: transition: border-radius 0.3s ease;

Why does my border radius not show on an image?

Images ignore the parent element's border radius unless you add overflow: hidden to the parent, or apply the border-radius directly to the <img> tag itself.

Can I use different units for border-radius?

Yes. You can mix px, %, em, and rem within the same shorthand: border-radius: 8px 50%; Each value is calculated independently.

What does border-radius do to elements with no visible border?

It still works. Border radius rounds the element's box regardless of whether a border is visible. It affects the background, box shadow, and overflow clipping — not just the border line itself.

How do I round only the left side of an element?

Set the left corners and leave the right corners at 0: border-radius: 8px 0 0 8px; The order is top-left, top-right, bottom-right, bottom-left.