在线免费CSS圆角生成器
可视化生成CSS边框圆角，独立控制四个角度。
Who uses the CSS圆角生成器?
- 为设计系统组件生成 border-radius 值的前端开发者。
- 测试圆角选项以达到合适视觉分量的 UI 设计师。
- 通过交互式可视化探索学习 border-radius 属性的 CSS 初学者。
How the CSS圆角生成器 works
使用滑块独立控制四个角各自的圆角半径。
勾选“Link all corners”，让四个滑块一起移动，实现统一的圆角效果。
在示例卡片元素上实时预览形状。
复制生成的 CSS border-radius 值，直接用于你的样式表。
Tips & tricks
- 取消勾选“Link all corners”，即可制作不对称的角——适合对话气泡或标签页样式的形状。
- 生成的 CSS 每个角只使用一个半径值（border-radius: TL TR BR BL）——如需椭圆形圆角，请用斜杠语法手动编辑复制的值。
- CSS 简写中角的顺序始终是从左上角开始顺时针排列——与本工具中滑块的标签顺序一致。
- 在小元素上使用非常大的半径值时，一旦各角在中间相遇，视觉效果就会达到上限。
Frequently Asked Questions
CSS border-radius 的简写语法是什么？
单个值：border-radius: 8px（所有角相同）。四个值：border-radius: 10px 20px 30px 40px（左上、右上、右下、左下，顺时针）。两个值：border-radius: 10px 20px（左上+右下，右上+左下）。
如何用 CSS 制作一个完美的圆形？
在一个正方形元素（宽高相等）上设置 border-radius: 50%。对于非正方形元素，50% 会生成椭圆。要制作圆形，请在宽高相等的 div 上使用 border-radius: 50%。
什么是椭圆形圆角？
CSS border-radius 支持通过 8 值语法为每个角单独设置水平和垂直半径：border-radius: 10px 40px / 40px 10px 会生成有机的“斑点”形状。本工具不会生成这种语法——它每个角只控制一个半径值。
可以用 border-radius 制作有机的“斑点”形状吗？
可以，使用 CSS 完整的 8 值语法（每个角不同的水平和垂直半径）手写实现。本工具覆盖的是更常见的每角单一半径场景；如需椭圆形/斑点形状，请直接手写 border-radius 的值。
什么样的数值能产生典型的“卡片”圆角？
4–8px 是低调卡片的标准值。12–16px 常用于现代 UI 卡片。24px 以上则用于“药丸”或“标签”风格的元素。在小卡片上使用接近 50 的数值会开始显得过于夸张。
Is my data safe when using the CSS圆角生成器?
Completely safe. The CSS圆角生成器 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS圆角生成器 output in commercial projects?
Yes. The CSS圆角生成器 is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS圆角生成器 follow official standards?
Yes. The CSS圆角生成器 is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.