Border Radius Generator

Create beautiful rounded corner designs with intuitive controls.

px
px
px
px
px
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.

  1. Select the "Simple" tab
  2. Move the "All" slider to apply the same value to all four corners
  3. Or adjust each corner ("Top Left", "Top Right", "Bottom Right", "Bottom Left") individually
  4. Check the result in the real-time preview
  5. 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.

  1. Select the "Advanced" tab
  2. Adjust the "Top", "Right", "Bottom", "Left" sliders
  3. Or directly drag the four vertices (○) on the preview for adjustment
  4. Check the result in the real-time preview
  5. 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.