CSS 圆角教程：border-radius 四个值的顺序、圆形和胶囊按钮
一句话答案
border-radius 四个值的顺序是左上、右上、右下、左下（顺时针），例如 40px 8px 40px 8px；圆形用 50%，胶囊按钮用一个很大的值如 999px。用 CSS 圆角生成器分别调四个角，实时预览后复制。
圆角几乎出现在每一个现代界面里：卡片、按钮、头像、输入框。CSS 圆角生成器 可以分别调整四个角，实时预览形状，并生成 border-radius 代码。
值的顺序
border-radius 按顺时针从左上角开始：
| 写法 | 含义 |
|---|---|
border-radius: 20px; | 四个角都是 20px |
border-radius: 20px 8px; | 左上和右下 20px，右上和左下 8px |
border-radius: 20px 8px 4px; | 左上 20px，右上和左下 8px，右下 4px |
border-radius: 40px 8px 40px 8px; | 左上 40px、右上 8px、右下 40px、左下 8px |
操作步骤
- 设置四个角：打开 CSS 圆角生成器，分别调整“左上”“右上”“右下”“左下”，默认都是 20。
- 选择单位：“单位”可选 px 或 %。px 是固定大小；% 按元素宽高的百分比计算。
- 预览：上方的方块会实时显示圆角效果。
- 复制代码：点击“复制 CSS”，粘贴到样式表中。
⭕ CSS 圆角生成器
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
常用写法
| 效果 | 代码 | 说明 |
|---|---|---|
| 圆形头像 | border-radius: 50%; | 元素需为正方形 |
| 椭圆 | border-radius: 50%; | 用在长方形元素上 |
| 胶囊按钮 | border-radius: 999px; | 值超过高度一半时两端变成半圆 |
| 对话气泡 | border-radius: 16px 16px 16px 4px; | 一个角较小，像气泡尖角 |
| 只有上方圆角 | border-radius: 12px 12px 0 0; | 卡片顶部图片 |
注意事项
- 子元素溢出：父元素有圆角、子元素是图片时，图片的直角可能露出来，给父元素加 overflow: hidden；
- 配合阴影：box-shadow 会跟随圆角形状，参考 CSS 阴影；
- 图片本身加圆角：要导出带圆角的图片文件而不是写 CSS，可以用 图片圆角和边框。
常见问题
border-radius 四个值的顺序是什么？
从左上角开始顺时针：左上、右上、右下、左下。
怎么用 CSS 做圆形？
给宽高相等的元素设置 border-radius: 50% 即可；宽高不等时会变成椭圆。
胶囊形按钮怎么写？
设置一个大于按钮高度一半的值，例如 border-radius: 999px，两端就会变成半圆。
百分比圆角和 px 圆角有什么区别？
px 是固定的半径；百分比按元素自身宽高计算，宽高不同时水平和垂直半径也不同，所以长方形用 50% 会得到椭圆。