← All Tools
🎨

圆角生成器

可视化生成 CSS border-radius 代码。

Features

  • Visually adjust corner sliders to instantly create perfect CSS border-radius values for your UI elements.
  • Generate complex, asymmetrical organic shapes by independently manipulating each of the eight corner points.
  • Copy the generated CSS code with a single click for quick and seamless integration into your stylesheets.
  • Preview your custom border-radius live on an HTML element against a customizable background.
  • Input standard border-radius values to instantly visualize and reverse-engineer existing CSS shapes.

How to Use

  1. Drag the individual sliders corresponding to the four corners of the box to adjust the curve.
  2. Use the inner sliders if you want to create asymmetrical or elliptical curves for organic shapes.
  3. Watch the live preview box update in real-time as you fine-tune your design.
  4. Click the 'Copy CSS' button to copy the exact border-radius property to your clipboard.
  5. Paste the copied code directly into your project's stylesheet.

Frequently Asked Questions

How do I make a circle using CSS border-radius?

To create a perfect circle, set your element's width and height to be exactly equal, then set the border-radius to 50%. You can type 50% into our generator to instantly see the circular result.

What is the maximum border radius allowed in CSS?

Technically, there is no strict numerical maximum, but the browser will automatically cap the radius at 50% of the smaller dimension if the values exceed the size of the box. This prevents the corners from overlapping and breaking the shape.

Can I create a leaf or organic shape with border-radius?

Yes, you can create organic shapes by using the extended border-radius syntax with up to eight values separated by slashes. Our generator allows you to easily manipulate these eight points visually to create complex fluid shapes.

How do I add a border-radius to only specific corners?

You can target specific corners by using the individual CSS properties like border-top-left-radius, or by specifying zero for the corners you want to remain sharp in the shorthand syntax. The tool lets you adjust each corner independently for this exact purpose.

Does CSS border-radius work on background images?

Yes, applying a border-radius to a container element will clip both its background color and any background images to fit the rounded corners. If the element has an overflow-hidden property, it will also clip all inner HTML content.