Border Radius Generator
Create beautiful rounded corner designs with intuitive controls.
💡You can directly manipulate the 4 vertices with the slider or on the preview
border-radius: 12px 12px 12px 12px;
What is Border Radius Generator?
Border Radius Generator is 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. This tool streamlines your design workflow and helps you quickly achieve sophisticated rounded corner designs.
Key Features
- Visual Preview: See results instantly with a real-time changing preview
- Two Modes: Create simple rounded corners or complex shapes with advanced mode
- Intuitive Controls: Easy adjustment via sliders or drag operations
- Code Copy Function: Copy generated CSS values with one click
- Outline Display: Optional outline display for easier shape verification
How to Use Border Radius Generator
Border Radius Generator offers two modes: "Simple" and "Advanced". Each mode allows you to create rounded corner designs easily.
Simple Mode
In Simple mode, you can adjust the rounded corners of each corner individually or set them all at once with the "All" slider.
- Select the "Simple" tab
- Move the "All" slider to apply the same value to all four corners
- Or adjust each corner ("Top Left", "Top Right", "Bottom Right", "Bottom Left") individually
- Check the result in the real-time preview
- Copy the generated CSS code with the copy button
Advanced Mode
Advanced mode allows you to create complex curved shapes. It's perfect for asymmetrical designs and creative shapes.
- Select the "Advanced" tab
- Adjust the "Top", "Right", "Bottom", "Left" sliders
- Or directly drag the four vertices (○) on the preview for adjustment
- Check the result in the real-time preview
- Copy the generated CSS code with the copy button
Additional Options
- Outline Display: Turn on the "Outline" option to display a dashed outline that helps you more clearly see the shape of your design
Use Cases
- Button Design: Create rounded corners for attractive and user-friendly buttons
- Card Layouts: Apply appropriate rounded corners to information cards and containers
- Image Frames: Round the corners of photos and images for a softer impression
- Modal Windows: Set suitable rounded corners for popups and dialogs
- Creative Designs: Create 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.