CSS Border Radius Generator

Generate CSS border-radius visually. Adjust each corner independently or link them together.

Free to use. Runs in your browser.

Drag the sliders to set border-radius values and copy the generated CSS.

Use one value for consistent corners, unlink corners for asymmetric shapes, and use 50% only when the element dimensions support a circle or ellipse.

Link all corners

All Corners: 16px

border-radius: 16px;

How CSS Border Radius Actually Works

The border-radius property doesn't just round corners, it defines elliptical curves. Each corner gets two radii: horizontal and vertical. When they're equal, you get a perfect circular arc. When they differ, you get an elliptical curve that can create organic, blob-like shapes.

Think of each corner as a quarter of an ellipse tucked into the box. The horizontal radius controls how far the curve extends along the top/bottom edge, while the vertical radius controls how far it extends along the side edge. That's why border-radius: 50% turns a square into a circle, each corner's curve meets the next, creating a continuous ellipse.

This generator lets you set a circular radius for all corners together or for each corner independently. The deeper slash syntax is worth knowing too, because it lets you create elliptical corners when a design needs a less regular shape.

Common Border Radius Patterns

Pattern	CSS Value	Use Case
Subtle rounding	`4px` or `0.25rem`	Input fields, table cells, small cards
Standard card	`8px` or `0.5rem`	Cards, modals, dropdowns
Soft card	`12-16px` or `0.75-1rem`	Modern SaaS cards, app-style UI
Pill / chip	`9999px` or `full`	Tags, badges, pill buttons
Circle	`50%` (on a square)	Avatars, status dots, round buttons
Top-only	`12px 12px 0 0`	Card headers, tab bars, sheet handles
Organic blob	`30% 70% 70% 30% / 30% 30% 70% 70%`	Decorative shapes, backgrounds, avatars

What this means for you: Most UI elements only need the first three patterns. Save the complex elliptical values for decorative elements where a unique shape adds personality.

The Shorthand Syntax

CSS border-radius shorthand follows the same clockwise pattern as margin and padding, top-left, top-right, bottom-right, bottom-left. The slash separates horizontal radii from vertical radii:

One Value

border-radius: 8px, all four corners, circular arc.

Two Values

border-radius: 8px 0, top-left/bottom-right get 8px, top-right/bottom-left get 0.

Four Values

border-radius: 8px 4px 12px 0, each corner set individually, clockwise from top-left.

Elliptical (slash syntax)

border-radius: 50% / 30%, horizontal radii before the slash, vertical radii after. This is how you make organic shapes.

Copyable Worked Example

A common UI pattern is a card with a rounded top edge and a square bottom edge, for example when the card sits flush against a footer, table, or action bar. The shorthand order is top-left, top-right, bottom-right, bottom-left.

.profile-card {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

First value

16px rounds the top-left corner.

Second value

16px rounds the top-right corner.

Last two values

0 0 leaves the bottom-right and bottom-left corners square.

Add overflow: hidden when child content, images, or background layers need to be clipped to the rounded outline.

Browser Support and Rendering Rules

border-radius is supported in all current browsers and is safe for ordinary interface work. It applies to the border box and affects the painted background, border, and clipping behaviour when paired with overflow: hidden.

Browsers also prevent impossible curves. If the sum of two adjacent radii is larger than the box edge, the browser scales the radii down proportionally so the curves meet cleanly. That is why 9999px is a reliable pill value: the browser clamps it to the largest valid curve.

Input	Browser behaviour	Use it for
8px	All corners get the same circular radius	Inputs, buttons, small cards
8px 16px	Opposite corners share values	Diagonal emphasis and badges
8px 12px 16px 0	Each corner follows clockwise order	Cards attached to another surface
50%	Percentages resolve against the box dimensions	Circles on square elements, ellipses on rectangles
50% / 30%	Horizontal and vertical radii are set separately	Decorative ovals and organic shapes

Circular vs Elliptical Radius

Circular radius

The common shorthand uses the same horizontal and vertical radius for each corner. This is what most UI components need.

border-radius: 12px 12px 0 0;

Elliptical radius

Slash syntax lets you set horizontal radii before the slash and vertical radii after it. It is useful for blobs, ovals, and decorative masks.

border-radius: 40% 60% 55% 45% / 35% 45% 55% 65%;

Tailwind CSS Border Radius Classes

Class	CSS Value	Pixels (default config)
rounded-sm	0.125rem	2px
rounded	0.25rem	4px
rounded-md	0.375rem	6px
rounded-lg	0.5rem	8px
rounded-xl	0.75rem	12px
rounded-2xl	1rem	16px
rounded-3xl	1.5rem	24px
rounded-full	9999px	Pill / circle

What this means for you: If your project uses Tailwind, grab the pixel value from this generator and pick the closest utility class. For custom values, use arbitrary syntax likerounded-[14px].

Common Border Radius Mistakes

Using 50% on a rectangle and expecting a circle

border-radius: 50% makes a circle only when width and height are equal. On a rectangle it makes an ellipse or pill.

Forgetting to clip child content

Rounded corners do not automatically crop an overflowing child image. Add overflow: hidden to the rounded container.

Mixing up the corner order

Four values run clockwise from top-left. The third value is bottom-right, not bottom-left.

Using very large values without intent

A huge pixel radius is fine for pills, but it can make cards feel inconsistent. Use a small scale such as 4px, 8px, 12px, and 16px for interface components.

Expecting radius to change layout

Rounded corners change painting, not the element's box size. Spacing, alignment, and hit area still follow the original rectangle.

Overusing blob syntax in product UI

Elliptical slash values are useful for illustration and decorative shapes. For repeatable buttons, cards, and form controls, a simple radius scale is easier to maintain.

Related Tools

CSS Box Shadow Generator

Add depth and elevation to rounded elements.

CSS Gradient Generator

Fill your rounded shapes with smooth colour gradients.

Colour Palette Generator

Create harmonious colour schemes for your UI components.

PX to REM Converter

Convert pixel radius values to responsive rem units.

CSS Beautifier

Clean up your stylesheets after pasting generated CSS.

CSS Minifier

Compress your production CSS for faster page loads.

How to use this tool

Drag the slider to set your border-radius value (or unlink corners for individual control)

Preview the shape live on the blue box above

Click Copy CSS to grab the generated code

Common uses

Creating rounded card designs for modern UI layouts
Building circular avatar components with 50% radius
Generating pill-shaped buttons and tag elements
Previewing organic blob shapes with asymmetric radii
Matching radius values across buttons, inputs, cards, and dialogs

Share this tool

Frequently Asked Questions

What is border-radius?

CSS border-radius rounds the corners of an element. You can set each corner independently or use a single value for all four corners.

What units can I use?

Pixels (px) and percentages (%) are most common. 50% on a square creates a perfect circle. You can also use rem, em, or any CSS length unit.

Can I make a pill shape?

Yes, set a large border-radius like 9999px on a rectangular element to get a pill/capsule shape. In Tailwind CSS, this is the rounded-full class.

What's the difference between px and % for border-radius?

Pixels give you a fixed curve size regardless of element dimensions. Percentages scale with the element, 50% always creates the maximum possible curve. Use px for consistent UI elements and % for responsive shapes.

How do I make organic blob shapes with border-radius?

Use the slash syntax to set different horizontal and vertical radii for each corner, like border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. This creates asymmetric curves that look organic and hand-drawn.

What border-radius values does Tailwind CSS use?

Tailwind's default scale goes from rounded-sm (2px) through rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-3xl (24px), to rounded-full (9999px).

Can I set different radii for each corner?

Yes. Toggle off 'Link all corners' in this tool to control each corner independently. In CSS, use four values: border-radius: top-left top-right bottom-right bottom-left.

Does border-radius affect the clickable area?

Visually the corners are rounded, but by default the clickable/tappable area remains rectangular. You can add overflow: hidden to clip content and interactions to the rounded shape.

What border-radius should I use for cards?

Most modern design systems use 8-16px (rounded-lg to rounded-2xl in Tailwind) for cards. Apple uses 12-20px. Google's Material Design uses 12px. Match your design system's existing values.

How do I make a circle with border-radius?

Set border-radius: 50% on an element with equal width and height. If the dimensions aren't equal, you'll get an ellipse instead of a circle.

Does border-radius work on images?

Yes. Apply border-radius directly to img elements or their container with overflow: hidden. This is the standard way to create circular avatars.

What's the shorthand order for border-radius?

The shorthand follows clockwise order: top-left, top-right, bottom-right, bottom-left. Two values means top-left/bottom-right and top-right/bottom-left. One value applies to all corners.

Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.