CSS圆角生成器（border-radius）
可视化设置圆角：四角联动或分别调整，支持px或%，可制作圆形和有机形状，并复制CSS、SCSS或Tailwind代码。
免费 在浏览器中运行 无需注册
正在加载CSS圆角生成器…
您的文件绝不离开您的设备
如何使用CSS圆角生成器
- 1
在此页面打开CSS圆角生成器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
关于此工具
CSS的border-radius属性用于给盒子、按钮、卡片和图片设置圆角。这款圆角生成器让你拖动滑块并在实时预览中看到形状变化，然后复制代码。四个角联动可得到均匀圆角，取消联动则可分别塑造每个角，从细微的卡片圆角到完美的圆形和有机形状都能实现。
使用方法
- 拖动滑块一次性设置所有圆角，或取消联动后分别设置每个角。
- 在固定圆角用的px和随元素缩放的%之间切换。
- 使用预设：方形、圆角、圆形等，或随机生成斑点形状。
- 修改预览盒子的颜色和背景，以匹配你的设计。
- 复制CSS、SCSS或Tailwind代码。
常见形状
| 形状 | CSS |
|---|---|
| 细微圆角卡片 | border-radius: 8px; |
| 胶囊按钮 | border-radius: 9999px; |
| 圆形（正方形元素） | border-radius: 50%; |
| 单个圆角 | border-radius: 0 24px 0 0; |
| 叶子形 | border-radius: 0 50% 0 50%; |
小贴士
- 百分比数值随元素尺寸缩放，因此在任何屏幕上形状都保持一致。
- 嵌套元素：内层元素的圆角应小于父元素（外层圆角减去内边距），曲线才会均匀。
- 图片需要在父元素上设置overflow: hidden，或直接对img设置圆角。
- 保持一致：整个设计系统使用两到三种圆角尺寸即可。
用阴影生成器增加层次感，用Flexbox生成器搭建布局。
常见问题
如何用CSS制作圆形？
给正方形元素设置border-radius: 50%。在长方形上，同样的数值会得到椭圆。
可以只给部分角设置圆角吗？
可以。取消联动后分别设置，或使用四值写法：左上、右上、右下、左下。
应该用px还是%？
按钮和卡片需要固定圆角时用px，圆形等需要随元素缩放的形状用%。
如何制作胶囊形按钮？
使用很大的圆角值，例如9999px。无论按钮多高，两端都会变成完全的半圆。
可以获取Tailwind类名吗？
可以。选择Tailwind导出，即可获得对应形状的rounded类或任意值写法。
border-radius对图片有效吗？
有效。直接应用到img元素，或应用到设置了overflow: hidden的父元素上。