CSS border-radius 怎么写？圆角、椭圆圆角和胶囊按钮完整说明

圆角看起来只是一个细节，但它会影响按钮、卡片、头像、弹窗和标签的整体气质。圆角太小，界面会显得硬；圆角太大，信息密度高的后台页面又会显得松散。掌握 border-radius 的写法，可以让你更稳定地控制页面视觉。

如果你只是想快速调出合适的效果，可以打开 CSS 圆角生成器，拖动四个角的数值，实时预览并复制 CSS。工具在浏览器本地运行，不需要上传任何文件。

border-radius 的基本写法

最常见的写法是给四个角设置同一个半径：

.card {
  border-radius: 16px;
}

这个写法适合卡片、输入框、普通按钮和弹窗。一般来说，正文内容较多的卡片可以用 8px 到 16px，更轻松的营销卡片可以用 20px 到 32px。

四个角分别设置

border-radius 支持一到四个值，顺序和 CSS 的边距类似，但指的是四个角：

.bubble {
  border-radius: 24px 24px 24px 6px;
}

四个值的顺序是：左上、右上、右下、左下。比如聊天气泡常常会让其中一个角更小，从而产生“指向某一侧”的感觉。活动卡片、优惠券、贴纸式标签也可以通过不对称圆角做出更有识别度的形状。

椭圆圆角是什么

当你看到带斜杠的写法，例如：

.shape {
  border-radius: 70% 30% 70% 30% / 35% 65% 35% 65%;
}

斜杠前面的值控制横向半径，斜杠后面的值控制纵向半径。它可以做出更自然的叶片、气泡、头像贴纸、柔和装饰块，而不是四个角都完全一样的机械圆角。

胶囊按钮怎么做

胶囊按钮通常有两种写法：

.pill {
  border-radius: 999px;
}

或者：

.pill {
  border-radius: 50%;
}

如果按钮宽度明显大于高度，999px 是更稳的写法。它不依赖元素比例，按钮高度变化时也能保持满圆角。50% 更适合正方形头像、圆形图标或比例固定的元素。

圆角和真实界面设计的关系

圆角不是越大越好。工具类页面、表单、后台系统通常需要更清晰的边界，圆角可以克制一些。品牌页、活动页、卡通风格页面可以使用更大的圆角，但也要注意文字和按钮不要因为圆角过大而显得拥挤。

同一个页面里，圆角最好有层级。比如大容器 24px，卡片 12px，按钮 8px 或胶囊。这样页面会有统一感，而不是每个模块都随手设置一个数值。

总结

border-radius 既能处理普通卡片，也能做胶囊按钮、气泡、不规则贴纸和椭圆形装饰。写 CSS 时，先确认这个元素是信息容器、操作按钮还是装饰图形，再决定圆角大小。

需要快速试效果时，可以用 CSS 圆角生成器 调整四角、单位和椭圆语法，再把生成的代码复制到项目里。