border-radius是接受长度值或百分比的CSS属性，控制边框角的弧度大小；单值统一四角，双值分水平垂直，四值顺时针设左上右上右下左下，支持混用单位，可用方位长名单独设置某角，优先级高于简写且不重置其他角。

border-radius 的基本写法和取值逻辑

border-radius 不是布尔开关，而是接受长度值或百分比的 CSS 属性，它控制的是边框角被“切掉”的弧度大小。值越大，圆角越明显；为 0 时无圆角；设为 50% 且宽高相等时，会得到正圆。

• 单值写法：border-radius: 8px → 四个角统一应用
• 双值写法：border-radius: 4px 12px → 水平方向（左上+右下）、垂直方向（右上+左下）分别生效
• 四值写法：border-radius: 4px 8px 12px 16px → 顺时针：左上、右上、右下、左下
• 支持不同单位混用，如 border-radius: 2em 50% 10px 0

设置单个角的圆角（避免影响其他角）

直接使用带方位的长名称属性，比用四值更可控，尤其在需要单独调整某个角时：

• border-top-left-radius: 6px
• border-top-right-radius: 0
• border-bottom-right-radius: 10px
• border-bottom-left-radius: 50%

注意：这些独立属性优先级高于 border-radius 简写，且不会重置其他角——这点常被忽略，误以为改一个就得重写全部。

border-radius 在 img 和 background-image 上的表现差异

对 <img alt="css如何设置元素边框圆角_通过border-radius实现圆角效果" > 元素设 border-radius，会裁剪图片内容本身（包括透明区域）；但对纯色背景或 background-image 的容器，只裁剪背景绘制区域，不触发图像裁剪（除非同时设了 overflow: hidden）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 想让图片真正圆角显示，必须加 overflow: hidden 配合 border-radius
• 用 background-image + border-radius 时，若背景图未设 background-clip: padding-box，圆角可能只作用于边框内侧，导致视觉偏差
• SVG 图标作为 background-image 时，border-radius 无法让 SVG 内部图形变圆，它只裁剪容器

兼容性和常见失效原因

现代浏览器对 border-radius 支持极好，IE9+ 均可用，但以下情况会导致“看起来没生效”：

• 父容器有 overflow: hidden，但子元素的圆角超出父容器尺寸——实际生效了，只是被裁掉了
• 设置了 border 但颜色透明（border: 1px solid transparent），容易误判为“没边框所以没圆角”，其实 border-radius 依然起作用
• 使用了 transform: scale() 等缩放后，圆角半径不会按比例缩放，可能显得过小或突兀
• Flex 或 Grid 容器中子项未设宽高，border-radius 可能因渲染尺寸不稳定而表现异常

圆角不是装饰糖衣，它本质是几何裁剪行为——理解这一点，才能预判它在哪生效、在哪被截断、为什么看起来“失灵”。