◖
免费 CSS 圆角生成器
可视化设计圆角，独立控制每个角。支持椭圆 X/Y 语法，创造有机圆形效果。
加载后可离线使用
border-radius: 20px 20px 20px 20px;
单位
常见用途
- 有机块体形状使用椭圆形 X/Y 语法为英雄部分和插图创建独特的块体形状。
- 卡片和容器角落现代 UI 设计中卡片、容器和面板的标准圆角。
- 头像和个人资料图片形状为个人资料图片创建正确的角落样式：圆形、squircle 或圆角正方形。
- Pill、标签和徽章使用 9999 预设构建完美的圆形 pill 按钮、标签和徽章。
- 非对称角落设计混合各角落的半径以创建与众不同、易于识别品牌的卡片和按钮形状。
工作原理
圆角生成器完全在浏览器中运行——没有服务器、没有库，也不上传。它使用 React 状态和 useMemo 直接在 JavaScript 中构建 CSS border-radius 值字符串，然后作为内联样式应用到一个实时的 div 元素上，由浏览器自身的 CSS 引擎实时渲染形状。
- 1滑块写入状态每个范围输入写入八个数值状态变量之一——四个水平圆角半径，以及椭圆模式下的四个垂直半径。统一模式通过 setAll 辅助函数将八个值合并为一个滑块，同时同步所有值。
- 2useMemo 组装 CSS 值每当任一圆角值、单位（px 或 %）或椭圆开关改变时，useMemo 钩子都会重新计算 border-radius 字符串。标准模式下生成四值简写；开启椭圆后，会加入斜杠分隔符形成完整的八值语法——例如 32px 20px 20px 32px / 20px 32px 20px 32px。
- 3浏览器 CSS 引擎渲染预览计算出的字符串作为内联 borderRadius 样式设置在普通 div 元素上。所有渲染都由浏览器的布局引擎完成——没有 canvas、没有 SVG，也没有第三方绘图代码。
- 4Clipboard API 复制输出点击“复制”会调用 navigator.clipboard.writeText，根据所选格式开关，写入 CSS 声明（border-radius: ...;）或等效的 Tailwind 任意值类（rounded-[...]）。