CSS Border Radius Generator

This generator will help you quickly create the CSS code needed to add rounded corners to elements on your webpages. It uses the CSS border-radius property, which allows you to control how rounded each corner of an element appears.

You can choose to apply the same radius to all corners for a consistent look, or customize each corner individually to create more unique shapes and layouts. As you adjust the settings, the generator updates the code automatically, making it easy to copy and use directly in your CSS.

CSS code

Copy & paste

Everything is worked out in your browser and nothing is uploaded. The container color only changes the preview, so it is not in the code.

How to use it

The css radius generator will assist you in visualizing the look of borders with the css property border-radius applied.

Choose how many valuesUse 1 value to round every corner the same, or 2, 3 or 4 values to round some corners differently. The sliders change to match.
Set the radiusDrag the sliders. The preview and the CSS code update straight away, and the values are kept when you switch between modes.
Try oval cornersSwitch to Advanced to give each corner a separate horizontal and vertical radius.
Style the borderChange the width, style and color of the border to see how it follows the curve.
Check other backgroundsChange the background and container colors to see the box on different colors.
Copy the codeWhen you like the look, copy the CSS into your project.

Good to know

Pixels or percent

Pixels give the same curve on any size of box. Percent scales with the box, so 50% on a square makes a circle.

Corner order

Values are read clockwise from the top left: top left, top right, bottom right, bottom left. With fewer values, the missing ones copy the opposite corner.

corner-shape is new

The corner-shape property gives bevelled, scooped and squircle corners. It only works in some browsers, which will show a normal round corner instead.

Frequently asked questions

How do I make a circle?

Use a square box and set the radius to 50%. Switch the display units to % and drag the slider to 50.

What does the slash in the code mean?

The numbers before the slash are the horizontal radii and the numbers after it are the vertical radii. They are used by the Advanced options to make oval corners.

Why does my corner-shape look the same as a normal corner?

Your browser does not support the corner-shape property yet. The generator tells you if that is the case. The code is still correct for browsers that do support it.

Is anything uploaded?

No. The preview and the code are created in your browser.