CSS: CSS 边框与圆角
最后更新：2026-10-13
边框（border）和圆角（border-radius）是让元素"有型"的重要属性。边框可以给元素添加轮廓线，圆角则让生硬的直角变得柔和。
边框属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
border-width |
1px, 2px, medium, thick |
边框宽度 |
border-style |
solid, dashed, dotted, double, none |
边框样式 |
border-color |
#333, red, transparent |
边框颜色 |
border |
2px solid #333 |
简写属性（宽度+样式+颜色） |
border-top/right/bottom/left |
1px dashed red |
单独设置某一边 |
border-radius |
4px, 50%, 10px 20px |
圆角半径 |
border-collapse |
collapse, separate |
表格边框合并模式 |
1. 边框属性 border
注意： 本页部分代码块使用
<style>、<div>前缀编码，实际预览时替换为<标签。
(1) 边框的三个要素
每条边框都有三个要素：宽度（width）、样式（style）、颜色（color）。
▶ 示例
▶ 试一试(2) border-style 的样式值
▶ 示例
▶ 试一试最常用的就是 solid、dashed、dotted 和 none。
(3) 指定某个方向的边框
▶ 示例
▶ 试一试(4) 边框简写顺序
CSS
border: width style color;
/* border: 2px solid #333; */
三个值顺序可以调换，但建议统一为 width style color。
2. 圆角属性 border-radius
border-radius 让元素的四个角变得圆润：
▶ 示例
▶ 试一试(1) 指定某个角
▶ 示例
▶ 试一试(2) 制作圆形
当 border-radius 的值大于等于元素宽高的一半时，会变成圆形：
▶ 示例
▶ 试一试(3) 胶囊形
▶ 示例
▶ 试一试3. 边框与背景的关系
- 背景颜色和背景图像会延伸到边框区域（但不覆盖边框样式本身）
- 默认情况下背景延伸到
border的外边缘 - 可以通过
background-clip属性控制背景的绘制范围
4. outline（轮廓线）
outline 和 border 类似，但有区别：
▶ 示例
▶ 试一试outline vs border 的区别：
outline不占据空间，不会影响布局outline不一定是矩形（在border-radius下会自动适配）outline不能分别设置四个边
❓ 常见问题
Q border-radius: 50% 和 999px 有什么区别？
A 50% 是相对于元素宽高的百分比——正方形变圆，长方形变椭圆。999px 是一个很大的固定值，只要大于宽高的一半，四个角都会变成完全圆润的"胶囊"形状。正方形时两者效果一样，长方形时区别明显。
Q outline 和 border 可以同时用吗？
A 可以。outline 不占用空间（不影响元素大小），border 占用空间。outline 常用在
:focus 状态，给键盘用户提供焦点指示。还可以用 outline-offset 控制 outline 和元素边界的距离。Q 只给一个角设置圆角怎么做到？
A 用
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 分别控制四个角。或者用简写 border-radius: 左上 右上 右下 左下;。📖 小节
- 边框和圆角是让页面元素"有型"的基础工具
border控制元素的轮廓线，border-radius让直角变圆润- 掌握组合使用技巧（比如
border-radius: 50%做圆形头像、border: none去掉默认边框），在实际开发中非常实用
📝 作业
- 创建一个卡片，使用边框和圆角让它看起来像一个"名片"——有边框、有圆角、有内边距。
- 使用
border-radius: 50%做一个圆形头像框。 - 使用不同方向的边框组合，制作一个带"下划线"的菜单项（只有底部有边框）。
- 尝试使用
dashed和dotted边框样式，看看它们在实际效果中的区别。
