直接用 border-radius 实现图片圆角，无需 img 的 border 属性；单独作用于 img 元素即可自动裁剪内容，若作用于父容器则必须加 overflow: hidden，同时注意百分比值在非正方形下呈椭圆、响应式覆盖及 UI 框架重置问题。
直接用 border-radius，别碰 img 的 border 属性
HTML 自身没有设置图片圆角的能力，<img border="1" alt="HTML怎么设置图像边框圆角_HTML结合CSS border-radius教程【美化】" > 这种写法早已废弃，且和圆角无关。所有现代圆角效果都靠 CSS 的 border-radius 实现，作用对象是 <img alt="HTML怎么设置图像边框圆角_HTML结合CSS border-radius教程【美化】" > 元素本身（或其父容器）。
常见错误是给 <img alt="HTML怎么设置图像边框圆角_HTML结合CSS border-radius教程【美化】" > 加了 border 样式后发现圆角不生效——因为默认情况下 border-radius 不会裁剪图像内容，只影响边框和背景；如果图像是直角 PNG 或 JPG，边缘依然会“顶破”圆角。解决方法很简单：
- 确保
img没有设置overflow: visible（它默认就是 visible，不用特意写） - 给
<img alt="HTML怎么设置图像边框圆角_HTML结合CSS border-radius教程【美化】" >直接加border-radius，浏览器会自动裁剪图像内容（现代浏览器均支持） - 避免同时设置
border和border-radius却忘了box-sizing: border-box，否则尺寸可能意外溢出
示例：
<img src="avatar.jpg" style="max-width:90%" alt="HTML怎么设置图像边框圆角_HTML结合CSS border-radius教程【美化】" >
圆角失效？检查父容器是否 overflow:hidden 缺失或干扰
当 <img alt="HTML怎么设置图像边框圆角_HTML结合CSS border-radius教程【美化】" > 套在 <div> 里，且你给 <code><div> 设了 <code>border-radius，但图片还是方的——大概率是父容器没加 overflow: hidden。
立即学习“前端免费学习笔记（深入）”；
原因：border-radius 只定义容器“可视区域”的形状，不自动裁剪子元素；子元素（比如图片）超出时，默认会显示出来。只有加上 overflow: hidden，才真正实现“圆角裁剪”。
- 单独给
img加border-radius：不需要父容器干预，推荐优先用 - 给父容器（如
<div>）加 <code>border-radius：必须同步加overflow: hidden - 如果父容器用了
transform或will-change，某些旧版 Chrome 可能导致overflow: hidden失效，此时退回直接作用于img更稳
示例：
<div style="border-radius: 50%; overflow: hidden;"><img src="head.png" alt="HTML怎么设置图像边框圆角_HTML结合CSS border-radius教程【美化】" ></div>
border-radius 的值怎么写才不踩坑
border-radius 看似简单，但参数顺序、单位混用、百分比行为容易出错。核心原则：它控制的是“角”的弧度，不是边框粗细。
- 单值写法（如
border-radius: 4px）：四个角等效，最常用 - 双值写法（如
border-radius: 4px 8px）：分别对应「水平半径 垂直半径」，常用于椭圆角 - 四值写法（如
border-radius: 4px 8px 12px 16px）：顺时针依次为左上、右上、右下、左下 - 百分比值（如
border-radius: 50%）：按盒模型宽高比例计算，正方形盒子下才是真圆；长方形图会变成椭圆角 - 不要对
img同时设width/height和border-radius: 50%却忽略object-fit: cover，否则头像可能被拉伸或留白
响应式场景下圆角突然变直？注意媒体查询里的重置
很多项目在 PC 端设了 border-radius: 6px，到手机端却变回直角——不是 CSS 没生效，而是某处媒体查询里写了 border-radius: 0 覆盖了它，或者用了 CSS-in-JS 库动态清除了样式。
排查重点：
- 检查 DevTools 中最终计算出的
border-radius值，看是否被更高优先级规则覆盖 - 留意框架组件（如 Ant Design、Element Plus）的默认主题样式，它们可能在小屏下重置
border-radius - 避免在全局重置样式表（如
* { border-radius: 0 }）里粗暴归零，后续再逐个恢复成本很高
更稳妥的做法：用类名控制，比如 class="rounded-md"，并在响应式断点中用 @media (max-width: 768px) { .rounded-md { border-radius: 4px; } } 微调，而不是依赖继承或通配符。
圆角看着简单，但图像裁剪行为、父容器约束、响应式覆盖这三点，最容易在线上环境突然冒出来。别假设“设了就一定生效”，尤其在嵌套结构或用了 UI 框架时，多看一眼 computed styles 更省时间。
