直接写border-radius: 10px即可生效，但需确保元素有明确宽高、非内联显示（如设display: inline-block）、有背景或边框，否则圆角不可见；正圆须宽高等值且border-radius: 50%。
border-radius 值怎么写才生效
直接写 border-radius: 10px 就能加圆角，但效果取决于元素是否有边框、背景或内容——如果元素是空的、没有 width/height、或者被父容器塌陷了，圆角会“看不见”。常见错误是给一个只有文字的 <span></span> 加 border-radius 却没设 display: inline-block 或 padding，结果毫无反应。
真正起作用的前提是：元素得有可渲染的“块状区域”。推荐做法：
- 确保元素有明确的
width和height（或由内容+内边距撑开） - 避免用在默认
display: inline的标签上，除非同时设置display: inline-block或display: inline-flex - 若背景色没铺满，检查是否漏写了
background-color或被透明背景误导
用 border-radius 实现正圆的关键条件
正圆 ≠ 任意圆角，它要求宽高严格相等，且 border-radius 必须设为宽度的一半（或直接用 50%）。很多人写 border-radius: 50% 却得到椭圆，就是因为容器宽高不一致。
正确做法很简单：
立即学习“前端免费学习笔记（深入）”；
- 设
width和height相同（比如都为80px） - 写
border-radius: 50%（推荐）或border-radius: 40px（数值需精确匹配半宽） - 加上
background-color或border，否则纯透明看不出来
示例：
.circle {
width: 80px;
height: 80px;
background-color: #007bff;
border-radius: 50%;
}
border-radius 四个角分别控制的写法
单值如 border-radius: 12px 是四角统一；要差异化，就得用多值语法。顺序是顺时针：左上、右上、右下、左下。漏写后面值会自动补全——border-radius: 10px 5px 等价于 10px 5px 10px 5px；border-radius: 10px 20px 30px 等价于 10px 20px 30px 20px。
更灵活的是用斜杠分隔水平/垂直半径，实现椭圆角：border-radius: 10px / 5px 表示所有角横向圆角 10px、纵向 5px；border-radius: 20px 10px / 5px 15px 则按顺序分别指定每角的横纵半径。
注意：斜杠语法在旧版 Safari（≤ iOS 8）里支持不稳定，生产环境慎用复杂组合。
为什么 border-radius 在图片或 iframe 上有时无效
直接对 <img alt="HTML中如何使用border-radius创建圆角和圆形" > 或 <iframe></iframe> 设 border-radius 通常能生效，但有两个典型失效场景：
-
overflow: hidden缺失：当父容器没有限制溢出（比如外层 div 没设overflow: hidden），圆角裁剪可能被“撑开”显示出来 - 图片本身带固有比例且容器未约束：比如
<img src="..." style="max-width:90%" alt="HTML中如何使用border-radius创建圆角和圆形" >，若父容器高度不定，图片拉伸后宽高不等，50%就变成椭圆 - 某些 iframe（尤其跨域）受浏览器安全策略限制，圆角可能被截断或渲染异常，稳妥做法是包一层
div并设overflow: hidden
最稳方案：用包裹容器 + overflow: hidden + 显式宽高 + border-radius，而不是依赖原生标签自身样式。
