最安全写法是border-radius: 10px；需按上左、上右、下右、下左顺时针顺序配1~4个值，统一单位，确保元素为正方形才可得正圆，注意overflow、flex收缩及subpixel渲染影响。
border-radius 值怎么写才不会出错
直接写 border-radius: 10px 最安全，但实际项目里常因值的写法不对导致圆角不生效或形状诡异。关键不是“能不能用”，而是“怎么配才符合预期”。
-
border-radius接受 1~4 个值，顺序是：上左、上右、下右、下左（顺时针），类似margin；写成border-radius: 10px 5px表示上下左右分别取 10px/5px/10px/5px - 百分比值（如
50%）是相对于元素宽高计算的，不是父容器；宽高不一致时，50%会变成椭圆而非正圆 - 避免混用单位：比如
border-radius: 10px 50%在某些老版 Safari 里可能被部分忽略，建议统一用 px 或统一用 %
想让图片或按钮变正圆，只靠 border-radius 不够
圆角只是“切角”，要真正显示为正圆，前提是元素本身得是正方形。否则 border-radius: 50% 切出来的是椭圆，尤其在响应式布局中容易露馅。
- 图片加圆角前，先确保其
width和height相等，或用aspect-ratio: 1锁定比例 - 按钮用
border-radius: 999px是常见 hack，但它依赖足够大的值“撑满”，不如明确写border-radius: 50%+ 正方形尺寸来得可控 - 如果元素有
overflow: hidden（比如卡片包着图片），记得检查子元素是否溢出——圆角只裁剪自身盒模型，不强制子元素对齐
border-radius 在 flex 或 grid 容器里失效？先看渲染层级
不是属性没生效，而是它被其他样式盖住了。最常见的是父容器设置了 overflow: hidden，但子元素用了 position: absolute 且偏移超出了父边界，这时圆角会被裁掉。
- 检查父级是否有
overflow: hidden或clip-path，它们优先级高于border-radius - flex 子项若设了
flex-shrink: 0又内容超长，可能挤压导致宽度计算异常，border-radius按错误宽高算就变形 - 使用
border-radius同时又加了box-shadow，阴影默认不随圆角裁剪；需要配合overflow: hidden才能同步裁掉阴影边缘
移动端圆角锯齿或模糊？别只盯着 radius 值
iOS Safari 和部分安卓 WebView 对 subpixel 渲染不敏感，border-radius: 2.5px 这种带小数的值可能被四舍五入成 2px 或 3px，导致视觉跳变或毛边。
立即学习“前端免费学习笔记（深入）”；
- 优先用整数 px 值，比如
2px、4px、8px；避免2.3px或calc(100% / 3)这类动态计算出小数值的写法 - 开启硬件加速（
transform: translateZ(0)）有时能改善渲染质量，但代价是额外图层，慎用于列表项等高频渲染区域 - 如果必须做精细控制，考虑用
clip-path: circle()替代，不过兼容性略低（IE 不支持，iOS 15.4+ 更稳）
border-radius 看似简单，真正卡住人的往往不是语法，而是它和尺寸、溢出、渲染管线之间的隐式耦合。改一个值前，先确认元素当前的盒模型状态——这是最容易被跳过的一步。
