border-radius 属性完整教程：CSS 实现各类圆角图形

前言
在 border-radius 出现之前，网页想要实现圆角、圆形、椭圆形元素，只能在绘图软件里制作图片再引入页面。如今只需一行 CSS 代码，就能把普通矩形容器改成圆角卡片、圆形头像、椭圆，或是四个边角弧度各不相同的特殊图形。
本文会完整讲解 border-radius 全部语法、像素与百分比单位的区别、可实现的图形样式，以及网页真实开发里的实用场景。文中搭配实操案例辅助理解，所有效果均可直接复制代码运行。
一、border-radius 基础作用
该属性适用于所有块级、行内块元素（div、button、img、section、input 等），用来定义元素边角的圆弧半径。
核心特性：圆角会同步作用于元素背景、边框、内边距区域，无需单独给每一层设置圆角效果。
二、border-radius 全部书写语法
属性支持 1~4 个数值，用空格隔开；同时也提供单独控制四个角的细分属性。
2.1 单值写法（四个边角弧度完全相同）
border-radius: 20px; 四个边角统一使用 20px 圆角，常用于常规圆角按钮、内容片。
2.2 双值写法（对角分组）
border-radius: 10px 40px; 第一个数值：左上角 + 右下角；第二个数值：右上角 + 左下角。
2.3 三值写法
border-radius: 5px 25px 10px; 1）左上角， 2）右上角 + 左下角， 3）右下角
2.4 四值写法（四个边角单独自定义）
顺序固定：左上角 → 右上角 → 右下角 → 左下角
border-radius: 8px 30px 0 15px; 数值填 0 代表该角保持直角，其余角设置圆角。
2.5 分角独立属性
如果只想修改单个边角，无需改动其他圆角，可使用细分属性：
border-top-left-radius 左上角圆角
border-top-right-radius 右上角圆角
border-bottom-right-radius 右下角圆角
border-bottom-left-radius 左下角圆角
示例：只给顶部两个角做圆角
border-top-left-radius: 20px;
border-top-right-radius: 20px;
三、两种半径单位
3.1 像素 px：固定圆角大小
像素值不会随容器尺寸变化，圆角弧度固定不变。
border-radius: 15px; 适合按钮、卡片，需要统一圆角尺寸的场景。
3.2 百分比 %：自适应圆角
半径按照元素自身宽高比例计算，是制作圆形、椭圆的核心用法。
border-radius: 50%;
百分比规则：
宽高相等（正方形容器）：50% 生成标准正圆；
宽高不等（长方形容器）：生成椭圆；
数值超过 50% 不会产生额外效果，最大圆角限制为边长的一半。
四、border-radius 可制作的基础图形
4.1 轻度圆角矩形
网页最常用样式，商品卡片、文本容器、按钮都在使用。
4.2 标准正圆
必备条件：元素宽度与高度数值完全相等。多用于用户圆形头像、页面标记、图标按钮。
4.3 椭圆
长方形容器搭配 border-radius:50% 即可生成拉伸椭圆。常用于装饰色块、长条形标签。
4.4 单角圆角容器
适合引用框、提示标签等特殊排版：
.block {
border-radius: 0 30px 0 0;
}
4.5 半圆 / 四分之一圆
搭配容器尺寸与单角圆角组合，截取圆形局部：
.half-circle {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
}
五、属性关键特性与注意事项
1）兼容 Flex、Grid、绝对定位
border-radius 不会和任何布局方式冲突。彩虹分步条案例就能证明：圆形标记可以直接放在 Flex 等分容器内正常显示。
2）边框 border 的影响
如果元素设置了边框，圆角会同步作用于边框，粗边框会让圆弧效果更明显。
.box {
border: 8px solid #222;
border-radius: 20px;
}
3）内部内容裁切
容器内文字、图片超出边界时，会跟随圆角边缘自动裁切，头像圆形裁剪就是依靠这个特性实现。
4）不具备继承性
圆角不会自动传递给子元素，内部盒子想要圆角，需要单独设置 border-radius。
5）数值 0 的作用
border-radius:0 会重置所有圆角，恢复直角，常用于移动端适配切换样式。
六、网页开发实际应用场景
1）界面按钮：柔和圆角降低生硬感，提升页面友好度；
2）用户圆形头像：论坛、后台、社交网站通用样式；
3）新闻 / 商品卡片：弱化直角带来的僵硬视觉；
4）步骤指示器、装饰标记：彩虹分步条里的圆形数字圆点就是典型用法；
5）标签、状态椭圆色块：用来区分分类、价格、状态；
6）纯 CSS 装饰图形：无需图片，直接用圆形做页面分隔、小装饰。