圆角Border Radius
你可能会说
把卡片的尖角磨圆一点，看着柔和些。
控制元素外框边角弧度与圆角曲率的外观样式属性。卡片、按钮和头像常用 border-radius 控制四个角的弧度；正方形设为 50% 可得到圆形，长条设为很大的值可得到胶囊形。项目里应建立少量可复用的圆角档位，避免任意混用数值；圆角会影响观感，但“越圆越亲和”只是设计经验。
也常被叫作圆角边角弧度胶囊角
你可以这样告诉 AI Agent
请盘点现有 border-radius，收敛成少量按角色命名的 token，让同类按钮、输入框和卡片保持一致。胶囊和圆形只用于明确角色；用不同尺寸组件检查比例，并删除没有归属的零散数值。
什么时候用
什么时候不用
- 无语义地混用多种圆角，会削弱组件之间的一致性
- 给长方形写 50%：得到的是椭圆不是胶囊
- 容器有圆角但子内容仍超出边界：需要裁切时使用 overflow: hidden
- 四角使用无规则的不同半径，会让轮廓缺乏一致性
组成结构 · Anatomy
内容
角的圆弧大小，四个角可分别设
圆角沿着边框的弧线走
默认不被圆角裁剪，除非 overflow: hidden
常见变体 · Variants
较小半径Small
希望保留较清楚边缘感时；按组件尺寸选择
中等半径Medium
需要在边缘感和柔和轮廓间平衡时
较大半径Large
需要更明显圆弧时；先检查内容空间和嵌套关系
圆形Circle
正方形头像、状态点或圆形图标容器
胶囊Pill
长条标签或按钮需要两端完整圆弧时
典型使用场景
卡片与面板
border-radius: 12px
消息通知
深色模式
圆形头像
50% 正圆
小狐狸 · 2 小时前
这篇圆角教程太好懂了，已收藏！
胶囊标签
前端入门训练营
热卖
上新
border-radius: 999px 是让此示例达到胶囊轮廓的 CSS 写法，不是所有组件的固定值
输入框与按钮
同角色沿用同一圆角 token
border-radius
box-shadow
flex 布局
延伸阅读 · 权威出处
快速练习