border-radius 值越大，圆角越明显，但不是无限制放大
直接说结论：border-radius 的数值决定弧度大小，单位可以是 px、em、rem 或百分比。值为 0 时无圆角，值越大，四个角越“胖”。但要注意：当值超过元素宽高一半时，实际效果会饱和——比如一个 100px 宽的盒子，border-radius: 60px 和 border-radius: 100px 看起来几乎一样，因为浏览器会自动按 min(宽度/2, 高度/2) 截断。
用百分比设置圆角时，左右/上下半径分别计算
百分比值不是简单等比例放大，而是基于**该角所在方向的可用空间**：左上角的水平半径按容器宽度算，垂直半径按高度算。所以 border-radius: 50% 在正方形里是正圆，在长方形里会拉成椭圆（比如宽 200px、高 80px 的盒子，左上角实际是 100px / 40px 的椭圆弧）。
常见错误现象：border-radius: 50% 没有得到预期的“全圆”效果，其实是尺寸不匹配导致的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要确保“正圆角”，优先用固定像素值，比如
border-radius: 24px - 响应式场景下想保持比例，可用
clamp()，例如border-radius: clamp(8px, 5%, 24px) - 单独控制某一个角，写四值语法：
border-radius: 0 12px 24px 6px（顺时针：左上、右上、右下、左下）
border-radius 在 border-collapse: collapse 表格中失效
这是个经典坑：给 <table> 或 <code><td> 设 <code>border-radius，但表格用了 border-collapse: collapse，圆角就消失了。原因是合并边框模式下，单元格边界被强行“缝合”，裁剪掉了圆角渲染区域。
解决路径很窄，只有两个靠谱办法：
- 改用
border-collapse: separate，再配合border-spacing: 0模拟合并效果 - 放弃给
<td> 加圆角，改为给整个 <code><table> 外层套一层 <code><div>，对这个容器设 <code>border-radius和overflow: hidden注意：
overflow: hidden是关键，否则圆角只是“画出来”，内容仍会溢出。SVG 或图片作为背景时，border-radius 不会裁剪内容
border-radius只影响元素自身的边框和背景色渲染区域，对background-image（包括 SVG、PNG）、子元素或伪元素默认无效。你看到“圆角图片”，其实是靠overflow: hidden裁剪了超出部分，而不是圆角本身在起作用。容易踩的坑：
- 只设
border-radius: 50%，没加overflow: hidden→ 图片依旧方方正正地撑出来 - 用
background-clip: padding-box试图控制，但它只管背景色/渐变，不管图片 - Flex 或 Grid 子项有 margin，可能把圆角“顶破”，需检查盒模型是否干净
最稳的做法：容器设
border-radius+overflow: hidden，图片用<img alt="html圆角边框怎么变大_html边框弧度调整技巧【设置】" >标签或background-image都行，但别指望圆角自己聪明裁图。复杂点在于，当元素有 transform、filter 或 position: absolute 子元素时，
overflow: hidden的裁剪行为可能意外失效——这时候得靠clip-path补位，但那是另一回事了。 - 只设
