What is Border Radius Generator?

Border Radius Generator is a tool for adjusting CSS border-radius visually and checking the generated code. It supports both simple rounded corners and more complex asymmetric shapes.

Because you can edit the shape while watching the preview, it is easier to fine-tune than typing values by hand.

How to Use

1. Choose Simple or Advanced mode.
2. Adjust the shape with sliders or preview controls.
3. Turn on the outline if needed.
4. Review the generated border-radius CSS.

Main Settings

Simple

You can adjust each corner separately. The All control changes all four corners together.

Advanced

This mode creates more complex curved shapes using top, left, right, and bottom controls. You can also move the four preview handles directly.

Outline

This shows a dashed outline so the shape is easier to inspect.

Input and Output Example

If you set the four corners to values like 12px 24px 36px 48px in Simple mode, the result becomes:

border-radius: 12px 24px 36px 48px;

In Advanced mode, the output can look like:

border-radius: 33% 67% 52% 48% / 52% 32% 68% 48%;

Use Cases

• Adjusting rounded corners for buttons or cards
• Styling image frames or banners with softer shapes
• Creating asymmetric or organic shapes
• Fine-tuning CSS while checking the preview at the same time

Things to Keep in Mind

• Simple and Advanced modes generate different output styles
• Complex shapes can look different depending on the actual element size
• A shape that looks good in the preview may need adjustment in the final layout