HTML5无圆角布局能力，圆角由CSS border-radius控制，需作用于display为block或inline-block的元素，支持多值顺时针设置四角，正圆需width=height且border-radius:50%。
HTML5 本身不提供布局圆角能力，圆角完全由 CSS 的 border-radius 控制 —— 写在 HTML 标签里或用 JS 动态设都没用，必须走 CSS。
border-radius 怎么写才生效
它作用于任何有边框（或背景）的块级/行内块元素，比如 避免用模糊的“左上右下”记忆，直接按顺时针顺序：top-left → top-right → bottom-right → bottom-left。 上面这行表示：左上角 8px，右上角 16px，右下角 0（直角），左下角 50%（接近半圆）。注意： 立即学习“前端免费学习笔记（深入）”； 想让一个元素变成正圆，光写 真正难的不是怎么写圆角，而是判断什么时候不该用圆角：比如表单输入框在 Windows 高对比度模式下，、。关键点：
display: block 或 display: inline-block（默认 inline 元素如 设了也不生效）overflow: hidden 意外裁切（调试时常见黑盒）12px）、百分比（50%，常用于正圆）、em/rem，也支持多值写法四个角分别控制的写法
div {
border-radius: 8px 16px 0 50%;
}
50% 在宽高不等时不会出正圆，只按当前盒子宽度/高度各自计算。做正圆或椭圆的隐藏条件
border-radius: 50% 不够：
width 和 height 相等，否则是椭圆box-sizing: border-box 锁定尺寸object-fit: cover 配合固定宽高，而不是靠 border-radius 裁剪移动端适配和兼容性提醒
border-radius 在所有现代浏览器（包括 iOS Safari 4+、Android Browser 2.1+）都原生支持，但有两个易忽略点：
上时，部分安卓 WebView 会把圆角吃掉一部分，加 overflow: visible 可缓解border-radius 实现“圆角遮罩”效果（比如盖住子元素尖角）——该用 clip-path 的地方别硬扛border-radius 可能被系统强制抹平；又比如需要无障碍聚焦环完整显示时，过度圆角会让焦点框断裂。这些细节，比语法重要得多。
