What is Border Radius Generator?

A tool that allows you to easily create rounded corner designs for web development. It visually generates CSS border-radius property values through intuitive controls, allowing you to instantly copy and use the code.

From simple rounded corners to complex shapes, it streamlines your design workflow.

How to Use

You can create rounded corner designs in two modes.

Simple Mode

Adjust the rounded corners of each corner individually or set them all at once with the "All" slider.

1. Select the "Simple" tab
2. Adjust values with sliders
3. Check in the real-time preview
4. Copy the generated CSS code

Advanced Mode

Create complex curved shapes. Perfect for asymmetrical designs and creative shapes.

1. Select the "Advanced" tab
2. Adjust with sliders or directly drag the vertices (○) on the preview
3. Check in the real-time preview
4. Copy the generated CSS code

Additional Options

Turn on the "Outline" option to display a dashed outline for clearer shape verification.

Use Cases

• Button design: Rounded corners for attractive and user-friendly buttons
• Card layouts: Appropriate rounded corners for information cards and containers
• Image frames: Round photo and image corners for a softer impression
• Modal windows: Suitable rounded corners for popups and dialogs
• Creative designs: Asymmetrical shapes or wave-like complex designs

About CSS border-radius

The border-radius property is a CSS property used to round the corners of elements. It can be used to create designs ranging from simple rounded corners to complex shapes.

/* Basic usage (same value for all four corners) */
border-radius: 10px;

/* Different values for each corner (top-left, top-right, bottom-right, bottom-left) */
border-radius: 10px 20px 30px 40px;

/* Complex shapes (horizontal radius / vertical radius) */
border-radius: 10% 30% 50% 70% / 40% 60% 80% 20%;

For more detailed information, please refer to MDN Web Docs on border-radius.