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

Set border-radius: 50% on a square element (equal width and height). The 50% applies to all corners, creating a perfect circle.

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

Pixel values set an absolute corner radius regardless of element size. Percentage values are relative to the element's dimensions — 50% on a square creates a circle; 50% on a rectangle creates an ellipse.

How do I create a pill shape?

Set border-radius to a value larger than half the element's height (e.g., border-radius: 100px on a 40px tall button). This creates fully rounded left and right ends — the classic pill/capsule shape.

What is the shorthand vs longhand border-radius syntax?

Shorthand: border-radius: 10px 20px 30px 40px (top-left, top-right, bottom-right, bottom-left). Longhand: border-top-left-radius: 10px, border-top-right-radius: 20px, etc.

What browser support does border-radius have?

Border-radius is supported in all modern browsers and IE9+. No vendor prefixes are needed for standard usage. It's one of the most universally supported CSS properties.

Css Dev

Free

Border Radius Generator

Generate CSS border-radius with per-corner control and live preview. Create circles, pills, and complex shapes.

Link all corners

Top Left: 8px

Top Right: 8px

Bottom Right: 8px

Bottom Left: 8px

CSS

border-radius: 8px;

What is Border Radius Generator?

The Border Radius Generator creates CSS border-radius declarations visually. Independently control each corner's radius (top-left, top-right, bottom-right, bottom-left) or set all corners at once to create rounded corners, pill shapes, circles, teardrops, and other complex shapes.

Border-radius is one of CSS's most-used properties, transforming sharp-edged rectangles into friendly, modern rounded shapes. From subtle card corners (4px) to full circles (50%), this generator gives you visual control over every corner.

Why Use Border Radius Generator?

Creating complex asymmetric border-radius values (like squircles or organic blob shapes) by hand requires calculating exact percentages for all four corners. This visual tool lets you drag and see the shape update live, reaching the perfect shape in seconds instead of minutes.

Key Features of Border Radius Generator

✓Independent radius control for all four corners
✓Uniform and custom corner mode
✓Live shape preview
✓Generates short and long-form border-radius syntax
✓Copy CSS border-radius value

How to Use Border Radius Generator

1
Choose uniform or custom
Toggle between setting all corners equally or independently.
2
Adjust corner values
Use sliders or input fields to set the radius for each corner.
3
Preview the shape
See the live preview of how the element will look with your radius values.
4
Copy the CSS
Click 'Copy CSS' to get the border-radius declaration for your stylesheet.
5
Apply to your element
Paste the CSS into your stylesheet and adjust other properties as needed.