必须用 CSS border 属性为 img 添加边框，且需同时指定宽度、样式、颜色三要素（如 border: 2px solid #333），缺一不可；HTML 的 border 属性在 HTML5 中已废弃，无效。
用 CSS 的 border 属性直接加边框
HTML 本身没有给 <img> 标签加边框的原生属性（border 属性在 HTML5 中已废弃），必须用 CSS。最常用、最可靠的方式就是给 <img> 元素设置 border，比如：
<img src="photo.jpg" alt="示例图" style="border: 2px solid #333;">注意：这里的
2px solid #333 是三部分——宽度、样式、颜色，缺一不可；只写 border: 1px; 不生效，因为缺少样式（如 solid）。
避免图片和文字贴得太近：加 margin 或 display: block
默认 <img> 是内联元素，如果加了边框，旁边有文字时容易出现底部留白（基线对齐导致）。常见现象是边框下沿和文字之间多出几像素空隙。解决方法有两个：
- 给图片加
display: block;（推荐，尤其用于独立展示的图） - 或加
vertical-align: top/middle/bottom;调整对齐方式 - 也可以用
margin手动控制间距，比如margin: 4px;
<img src="icon.png" style="border: 1px dashed #ccc; display: block; margin: 8px auto;">
要圆角边框？用 border-radius 配合 border
单纯方边框不够用时，加圆角只需额外一行 CSS：border-radius。它和 border 完全兼容，但要注意顺序无关，不过渲染优先级上 border-radius 作用于边框本身。常见写法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
border-radius: 4px;—— 四角等半径 -
border-radius: 50%;—— 正方形图变圆形（长宽需相等） -
border-radius: 8px 0 8px 0;—— 分别控制左上、右上、右下、左下
边框不显示？检查这三件事
加了 border 却看不见，大概率是以下原因：
- 图片被其他 CSS 覆盖，比如父容器设了
overflow: hidden;且边框超出尺寸 - 边框颜色和背景色一致（比如
border: 1px solid white;放在白色背景上） - 用了
border: none;或border: 0;这类重置样式（尤其在 CSS 框架里很常见）
border 是否为实际值，而不是 none 或 0px。立即学习“前端免费学习笔记（深入）”；
边框样式看着简单，但和图片的display 类型、父容器 overflow、以及全局 CSS 重置规则经常打架，调的时候最好先清掉干扰样式再逐步加。 
