CSS 圆角生成器
免费线上 CSS 圆角生成器。即时预览并产生 CSS border-radius 代码，支持 px 与 % 单位。
CSS 圆角生成器
免费线上 CSS 圆角生成器。即时预览并产生 CSS border-radius 代码，支持 px 与 % 单位。
关于 CSS 圆角
生成四角 shorthand 语法
生成器会输出一行 border-radius 声明，顺序是左上、右上、右下、左下。您可以让四角联动或分别调整，再选择 px 或百分比单位后复制 CSS。
预览颜色不会进入输出片段
背景与区块颜色只用来让您调整形状时看清楚圆角效果。复制的代码只包含 border-radius 属性，因此可以直接粘贴进既有按钮、卡片或组件样式，不会夹带额外颜色规则。
常见问题
关于这个主题的常见疑问与实用解答。
可以为每个角设置不同的圆角值吗？
可以，您可以分别设置左上、右上、右下与左下各角的圆角值，或使用「所有角落」一次统一设置。
支持哪些单位？
支持像素（px）与百分比（%）。使用百分比可创建响应式造型，例如圆形（50%）或胶囊形状。
可以制作圆形或胶囊形状吗？
可以，将所有角设为 50% 即可在正方形元素上创建完美圆形，或在矩形元素上使用较大的像素值创建胶囊形状。
我的数据会被发送到服务器吗？
不会，border-radius CSS 生成完全在您的浏览器中处理。您的圆角值在本地处理，不会上传任何数据。