CSS圆角生成器

可视化生成CSS border-radius属性，支持独立控制每个角。自定义形状、大小、颜色，一键复制可用的CSS代码。

16px
#ffffff
#4f46e5
border-radius: 16px;
所有border-radius生成在浏览器中完成。不会向服务器发送任何数据。

How to Use This Tool

  1. 1

    Adjust border radius

    Use the slider to set the border-radius value for all corners at once, or unlink corners for individual control.

  2. 2

    Try presets

    Use preset buttons like Rounded, Pill, Circle, Leaf, or Drop to start with common shapes.

  3. 3

    Customize appearance

    Change the box size, colors, border width, and CSS unit (px, %, rem, em) to match your design.

  4. 4

    Copy the CSS

    Click "Copy" to copy the generated border-radius CSS property to your clipboard.

Frequently Asked Questions

What is CSS border-radius?
CSS border-radius rounds the corners of an element. You can set all four corners uniformly or each corner individually using shorthand values.
What units can I use?
You can use px (pixels), % (percentage), rem (root em), or em. Percentage values are relative to the element dimensions—50% creates a circle on a square element.
How do I make a perfect circle?
Set border-radius to 50% on a square element (equal width and height). The "Circle" preset does this automatically.
Is my data secure?
Yes. All generation happens entirely in your browser using JavaScript. No data is sent to any server.