CSS Border Radius Generator

About This CSS Border Radius Generator

This free border radius generator lets you visually build CSS border-radius values. Control each corner independently or link them together, switch between pixel and percentage units, customize the preview size and color, and copy the generated CSS code instantly.

How to Use

1. Choose whether to link all corners together or adjust them individually.
2. Select your preferred unit — pixels (px) or percentage (%).
3. Drag the sliders to set the border radius for each corner.
4. Adjust the preview box width, height, and background color to match your use case.
5. Click a preset shape for a quick starting point, or copy the CSS directly.

Frequently Asked Questions

What is the border-radius property?

The CSS border-radius property rounds the corners of an element. You can set a single value for all four corners or specify each corner individually using the shorthand syntax: border-radius: top-left top-right bottom-right bottom-left.

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

Pixel values give you an absolute, fixed rounding regardless of the element's size. Percentage values are relative to the element's dimensions — for example, border-radius: 50% on a square element creates a perfect circle.

How do I make a perfect circle with CSS?

Set the element's width and height to equal values, then apply border-radius: 50%. This makes each corner round by half the element's size, forming a circle.

How do I make a pill / capsule shape?

Use a large pixel value like border-radius: 9999px on a rectangular element. The browser automatically caps the radius so the shorter sides become fully rounded, creating a pill shape.

Is border-radius supported in all browsers?

Yes. The border-radius property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are required.