CSS border-radius 生成器，免费

通过可视化方式创建圆角并复制 CSS。

您的数据不会离开您的设备
20
20
20
20

预设

使用方法

  1. 拖动滑块以调整每个圆角的半径。
  2. 启用「联动所有圆角」可一次性修改全部圆角。
  3. 选择单位（px、%、rem、em）。
  4. 点击「复制 CSS」将该属性复制到剪贴板。

常见问题

如何做成圆形？

将所有圆角设为 50%（使用「圆形 / 胶囊」预设）。要得到完美圆形，请将其应用于正方形元素。

最大半径是多少？

滑块最多到 100。以 px 为单位时即 100 px。以 % 为单位时，100% 表示该圆角完全弯曲。您可以根据设计切换单位。

理解border-radius简写

CSS的border-radius属性定义于W3C CSS Backgrounds and Borders Module Level 3。其简写形式接受最多四个值用于圆形角，或最多八个值（以斜杠分隔）用于椭圆角。角的顺序是固定的：左上、右上、右下、左下，从左上角顺时针方向，正如读取时钟表盘的方式。规范没有歧义：「如果省略bottom-left，则与top-right相同。如果省略bottom-right，则与top-left相同。如果省略top-right，则与top-left相同。」

值含义示例
1个值四个角border-radius: 12px
2个值TL+BR取第一值；TR+BL取第二值border-radius: 12px 4px
3个值TL=第一值；TR+BL=第二值；BR=第三值border-radius: 12px 8px 4px
4个值TL TR BR BL顺时针border-radius: 12px 8px 4px 0
8个值（带/）水平半径 / 垂直半径（椭圆角）border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%

四个单角长写属性允许您精确定位单个角而无需编写其他角：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。每个属性接受一个值（圆形角）或两个值（椭圆x y）。

像素、百分比与50%技巧

W3C规范定义了百分比的解析方式：「水平半径的百分比参照border box的宽度，而垂直半径的百分比参照border box的高度。」这产生了一个重要结论：border-radius: 50%只有在元素为正方形时才能创建完美的圆形。在200×100的矩形上，每个角50%会产生一个椭圆：100px水平半径（宽度的一半）和50px垂直半径（高度的一半）。

何时选择哪种单位：

胶囊形技巧

将border-radius设置为大于元素最短边一半的值会将每个角夹紧为真正的半圆，无论宽度如何都产生胶囊形状。惯例是border-radius: 9999px，任何大到现实中元素都不会超过的数字。这就是为什么Bootstrap的.rounded-pill使用50rem（约800px），而Tailwind v4的rounded-full解析为calc(infinity * 1px)：两者都在编码同一个思想，即大于盒子的数字可以保证在任何元素上产生胶囊形。

椭圆角与有机Blob形状

八值（带斜杠）形式是设计师用于创建有机、不对称「blob」形状的方式，这类形状在主视觉插图和装饰背景中日益流行。每个角在斜杠前获得不同的水平半径，在斜杠后获得不同的垂直半径，产生不受圆弧限制的曲线。

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

RTL布局的逻辑属性变体

CSS Logical Properties Module Level 1引入了四个适应书写方向的逻辑长写属性：

当同一组件在两种阅读方向下都必须看起来对称时非常有用：例如，聊天气泡的「口」角应始终位于说话者一侧，而不总是在左侧。请注意，目前还没有逻辑属性简写，因此您必须单独编写所有四个长写属性才能选择RTL感知的角。

边框较粗时的外边缘与内边缘

半径应用于边框的外边缘。浏览器会自动为内边缘计算一个较小的同心半径，使边框在角处不显得不连续。实际影响：16px外半径配合2px边框的内半径约为14px，因此边框看起来像一个四周厚度恒定的框架。如果您希望背景颜色在边框内边缘处停止而非渗入其下，请设置background-clip: padding-box。

实用尺寸惯例

UI元素典型半径备注
卡片8-12 pxMaterial 3中等 = 12 px；许多设计系统介于8到16之间。
按钮（商务风格）4-8 px轻微圆角读起来专业而不失轻松。
按钮（消费者/胶囊形）9999px读起来更友好；用胶囊形技巧锁定。
输入框/表单字段4-8 px与按钮半径匹配以保持视觉一致性。
模态框/对话框12-16 px较大的表面能承受更大的半径而不显得幼稚。
标签/徽章4px或胶囊形明确的风格选择：锐角或全圆角，鲜有居中状态。
头像50%将其应用于正方形元素可获得完美的圆形。
移动端底部弹层16-24 px（仅顶角）使用单独的长写属性，使底角保持与屏幕边缘齐平。
主视觉Blob背景八值形式例如30% 70% 70% 30% / 30% 30% 70% 70%。

常见错误

  1. 对非正方形元素使用50%并期望得到圆形。矩形上的50%是椭圆。要么保持元素为正方形，要么使用border-radius: 9999px来获得真正的胶囊形。
  2. 忘记角的顺序。简写是从左上角顺时针方向（TL TR BR BL）。两值形式设置对角线相对的成对角，容易记错。
  3. 负值。规范将其定义为无效；浏览器会静默地夹紧为零。如果某个角的圆角效果不符合预期，请检查是否意外进行了减法。
  4. 圆角父元素泄漏子元素。具有border-radius的元素默认不会裁剪其后代。如果您希望子元素在圆角边缘处停止，请在父元素上添加overflow: hidden。
  5. 单角属性放在简写之前。CSS层叠是顺序敏感的，因此border-top-left-radius后跟border-radius会覆盖单角值。请将简写放在前面，然后是单角覆盖。
  6. 混用%和px显得笨拙。在一个角上设置50%半径，在另一个角上设置12px，很少产生设计师所期望的效果。每个元素保持一种单位。
  7. 表格与border-collapse: collapse。MDN参考文档明确指出：当边框折叠时，border-radius不适用于table或inline-table元素。要么切换到border-collapse: separate，要么将半径应用于包裹元素。

更多常见问题

为何我的图片没有获得圆角？

如果图片位于具有border-radius的容器内但角仍然看起来是方形的，则父元素没有进行裁剪。向父元素添加overflow: hidden。或者，直接将border-radius应用于<img>元素；图片原生响应该属性。

border-radius会影响性能吗？

可忽略不计。现代浏览器在GPU上渲染圆角，成本与直角基本相同。例外情况是每帧动画化大型元素上的border-radius（可能触发层重合成），但静态圆角实际上是免费的。

这在旧版浏览器中能使用吗？

可以。自IE9起，每个浏览器都支持无前缀的border-radius。逻辑属性变体（border-start-start-radius等）较新：Chrome 89+、Firefox 66+、Safari 15+。对于需要逻辑行为的旧版浏览器，请编写一个小型@supports块作为回退。

如何制作聊天气泡？

使用四个单角长写属性将三个角设为圆角，第四个设为小角或直角。那就是指向说话者的「口」角。例如，发出消息的气泡：border-radius: 16px 16px 4px 16px;。对于支持RTL的气泡，切换为逻辑长写属性，使口角随阅读方向翻转。

为何我的胶囊形按钮在不同元素宽度下看起来不均匀？

胶囊形将每个角夹紧为最短边的一半，对于典型按钮来说是高度。因此较短的按钮获得较小的半径，较高的按钮获得较大的半径。这是预期行为。如果您希望每个按钮无论大小都有恒定的半径，请使用固定像素值（例如border-radius: 24px）代替胶囊形技巧。

可以将CSS直接复制到Tailwind/Bootstrap项目中吗？

可以，生成的CSS是没有预处理器或框架依赖的纯标准语法。在Tailwind v4中，您还可以将任意值写成工具类（rounded-[12px]或rounded-[30%/70%]），如果您喜欢保持工具类风格的话。

相关工具

CSS box-shadow 生成器，免费 CSS 渐变生成器，免费 CSS 压缩器，免费