免费 AI IDE
你辛辛苦苦写好的按钮、卡片，棱角分明地立在页面上，怎么看都透着一股“毛坯感”。其实只差一步：给它加上圆角，整个界面立刻就柔和、精致了不少。在 CSS 里，给元素加圆角靠的是一个专门的属性——border-radius。最简单的情况是给 border-radius 写一个值，四个角就同时变圆；如果你想要更精细的控制，也可以分别指定每一个角。今天这篇文章，编程狮就把 CSS 圆角这件事从属性到坑点一次讲透。
一、border-radius 是什么：控制四个角的圆润程度
border-radius 是 CSS 里用来设置元素边框圆角的属性。你可以把它想象成拿圆规在每个角落画了一段弧线，弧线半径越大，角就越圆；半径设为 0，就是方角。它作用于元素的四个角，不论你是按钮、图片、还是一块 div 容器，都能用它来柔化边缘。
💡 小提示：圆角的大小用长度单位表示，常用 px（像素）或 %（百分比）。像素适合固定尺寸的小元件，百分比更适合想随元素尺寸自适应的场景。
理解了 CSS 圆角这个属性，后面两种“方法”其实就是“怎么把值填进去”的区别。圆角是前端样式里最常被提及、也最容易出效果的一笔，新手只要掌握它，页面质感立刻不一样。想系统学 CSS 基础，CSS 教程 里对盒模型和各类属性讲得很完整，建议搭配看。顺带一提，border-radius 不仅能用在矩形按钮上，用在图片、头像、甚至带边框的容器上效果都一样，它是 CSS 里性价比最高的“颜值开关”之一。
二、方法一：写一个值，四个角一起圆（最常用）
写 CSS 圆角最偷懒也最常用的写法，就是只给 border-radius 一个值：
.btn {
border-radius: 8px;
}这表示四个角的圆角半径都是 8 像素，按钮四个角会均匀地变圆。把值改成 0 就回到方角，改成比较大的数（比如 20px）角就更圆。这是一个“整体统一”的方案，适合绝大多数普通按钮和卡片。
⚠️ 注意：单个值的圆角是“正圆角”，也就是四个角弧度完全一致。如果你想要椭圆或者某个角特别尖，就不能只用这一种写法，得看下面的方法二。
日常开发中，给按钮统一加 6px 到 12px 的圆角，是最稳的视觉选择，既柔和又不显夸张。比如登录按钮用 8px、搜索框用 999px（超大值会退化成胶囊形）都是常见套路。CSS 圆角大小没有死规定，跟着整体风格走就行，宁可小一点也别圆得过分突兀。
圆角这件事，核心是“克制”。圆角太小（2px 以下）几乎看不出效果，白费功夫；圆角太大（超过元素高度一半）会变成 pill 胶囊形，未必好看。给按钮加圆角、给卡片加圆角、给头像加圆角，尺度可以各不相同：按钮 8px、卡片 12px、头像 50%，是常见的“圆角梯度”。记住，圆角是为了让界面更柔和而不是炫技，圆角用得恰到好处，页面质感自然就上来了。
三、方法二：分别指定四个角，做精细控制
当你希望 CSS 圆角的左上、右上、右下、左下各不一样时，border-radius 支持一次写多个值，按顺序对应“左上、右上、右下、左下”：
.card {
border-radius: 10px 10px 0 0;
}
上面这行表示“左上加圆角、右上加圆角、右下和左下是方角”，常用于卡片只让顶部两个角圆、底部贴边的情况。你还可以用更细的属性名 border-top-left-radius、border-top-right-radius 等单独设置某一个角。
💡 小提示：写两个值时，第一个管“左上+右下”，第二个管“右上+左下”；写四个值才是真正的“左上、右上、右下、左下”顺序，别记反。比如
border-radius: 12px 12px 12px 0就只把左下角留成方角，常用来做“贴着容器边缘”的卡片。这种“只圆一边”的技巧在信息流卡片、聊天气泡里特别常见，能制造出“这一侧贴着屏幕边缘”的视觉暗示，多写几次你就能凭手感定数值。比如做聊天气泡时，让气泡的圆角只出现在远离发送者的一侧，靠近自己的一侧保持方角，视觉上就更贴边。这种不对称的圆角处理，是很多精致 UI 里藏着的小心思。
如果你懒得手算这些数值，CSS圆角生成器 那篇里介绍了可视化生成圆角的思路，能帮你在调样式时省不少时间。
四、三个常见坑，让你少走弯路
坑一：元素变成椭圆而不是圆角。 做 CSS 圆角时，当你用百分比且元素不是正方形时，比如 border-radius: 50% 配在一个长方形上，得到的是两头尖的椭圆。想要正圆头像，记得让容器本身是正方形。
坑二：只设了宽没设高，圆角看不出效果。 有些空 div 没高度，加圆角自然看不出来。先确认元素有实际尺寸，再调 border-radius。
坑三：老浏览器兼容性。 现代浏览器对 border-radius 支持已经很好，但极老的版本需要加 -webkit- 前缀。正式项目里，用 CSS 怎么让 div 水平垂直居中 这类布局技巧配合圆角，能快速做出规整的卡片。
还有个容易忽略的点：当父容器设了 overflow: hidden，子元素超出父级圆角范围的部分会被裁掉，视觉上像是“圆角失效”。所以做嵌套卡片时，父级和子级最好都设圆角，避免出现直角露馅。把圆角理解成“剪掉直角”的剪刀，任何层叠遮挡关系都要一起考虑，才不会踩这种隐性坑。
总结
给元素加 CSS 圆角，核心就是 border-radius 这一个属性：写一个值，四个角一起圆，适合普通按钮卡片；写多个值或单独指定某个角，能做精细控制。圆角大小用 px 或 % 表示，值越大角越圆。记住正方形配 50% 才能做出正圆头像，长方形配 50% 只会得到椭圆。
圆角虽小，却是提升界面质感的关键一笔。它不占额外布局空间，却能显著影响用户对“精致度”的感知，值得在每个项目里用熟。下次写按钮、卡片、头像时，先想想该给多少圆角，往往比反复改配色更见效。
常见问题
Q：CSS 圆角里 border-radius 写 50% 为什么出来的是椭圆不是圆？
A：因为 50% 是相对于元素自身宽高计算的。长方形元素宽高不等，四角被拉成了椭圆。想做正圆，先把容器设成正方形，再写 50%。
Q：圆角在手机浏览器上会失效吗？
A：现代手机浏览器都支持 border-radius。只有极老的内核才需要加 -webkit- 前缀，一般情况直接写标准属性即可。
Q：能不能只让某一个角变圆？
A：能。用 border-top-left-radius、border-bottom-right-radius 这类单独属性，只给指定的角设值，其余角保持方角即可。
延伸学习
想把 CSS 布局能力补全，可以按这个顺序来：
