Can each corner have a different radius?

Yes. Unlink the corners to adjust them independently, choose pixels or percentages, and enable elliptical radii to set separate horizontal and vertical values.

What does the slash mean in border-radius CSS?

The slash separates four horizontal radii from four vertical radii. This creates elliptical corners, for example 30% 70% 60% 40% / 40% 35% 65% 60%.

What is the difference between four-value and eight-value radius syntax?

Four values set one radius per corner. Eight values set horizontal and vertical radii separately for each corner, which allows elliptical shapes and blobs.

Should I use percentages or pixels for rounded corners?

Pixels create a fixed corner size; percentages scale with the element dimensions and can form circles or organic shapes. Choose the unit that fits the responsive design.

How do I make a circle with CSS border-radius?

Set border-radius: 50% on a square element with equal width and height. A non-square element becomes an ellipse.

Can CSS border-radius be animated?

Yes. Apply a CSS transition to border-radius and change the radius on hover or another state. For clipped child content, use overflow: hidden when appropriate.

DeveloperReady to use

Border Radius Generator

Adjust each corner radius independently and copy the resulting CSS border-radius declaration.

Guide

Interactive workspace

No account required

Border Radius Generator

Radius unit 8-value elliptical mode Link all corners

Top left (24px)Top right (24px)Bottom left (24px)Bottom right (24px)

border-radius: 24px 24px 24px 24px;

Border-radius reference

The slash separates horizontal radii from vertical radii at the same corners, creating elliptical shapes. Four values set top-left, top-right, bottom-right, and bottom-left corners. Percentages scale with the box; 50% on a square makes a circle. For inner content, use overflow:hidden only when clipping is intended. CSS transitions can animate border-radius.

How to use it

Choose whether all four corners stay linked.
Adjust corner sliders and inspect the preview.
Copy the border-radius declaration and apply it to the intended element.

What is Border Radius Generator?

Adjust each corner radius independently and copy the resulting CSS border-radius declaration.

How it works

SiteIndex lets you set each corner radius independently, previews the shape live, and generates the matching border-radius CSS shorthand.

CSS border-radius values and elliptical corner syntax

Four values set the top-left, top-right, bottom-right, and bottom-left corner radii clockwise. Eight-value syntax separates horizontal and vertical radii with a slash, making elliptical corners and organic blob shapes. Percentages are relative to the element dimensions; pixel, em, and rem radii use length units.

Border-radius presets

Border-radius presets
Shape	Example CSS value	Use
Sharp	0	Square corners
Rounded	8px	Small control corners
Card	16px	Panels and cards
Pill	999px	Pill-shaped buttons
Circle	50%	Square elements
Egg / blob	30% 70% 60% 40% / 40% 35% 65% 60%	Organic elliptical shapes

The slash divides the four horizontal radii from the four vertical radii. Use overflow: hidden when child content must stay inside a clipped rounded shape. CSS transitions can animate border-radius between compatible values, but large animated corners may trigger extra painting.

Common uses

Create an organic or asymmetric card shape.
Match a design mockup's exact corner rounding.
Preview a shape before implementing it in CSS.

Limitations

Pixel and percentage radii and independent elliptical axes are supported. Appearance depends on the element's dimensions.

Frequently asked questions

Can each corner have a different radius?: Yes. Unlink the corners to adjust them independently, choose pixels or percentages, and enable elliptical radii to set separate horizontal and vertical values.
What does the slash mean in border-radius CSS?: The slash separates four horizontal radii from four vertical radii. This creates elliptical corners, for example 30% 70% 60% 40% / 40% 35% 65% 60%.
What is the difference between four-value and eight-value radius syntax?: Four values set one radius per corner. Eight values set horizontal and vertical radii separately for each corner, which allows elliptical shapes and blobs.
Should I use percentages or pixels for rounded corners?: Pixels create a fixed corner size; percentages scale with the element dimensions and can form circles or organic shapes. Choose the unit that fits the responsive design.
How do I make a circle with CSS border-radius?: Set border-radius: 50% on a square element with equal width and height. A non-square element becomes an ellipse.
Can CSS border-radius be animated?: Yes. Apply a CSS transition to border-radius and change the radius on hover or another state. For clipped child content, use overflow: hidden when appropriate.