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