border属性用于设置盒子边框,包含宽度、样式和颜色三要素,可统一或单独设置四边,支持圆角效果,需注意必须定义style才能显示边框。

在CSS中,border 属性用来设置盒子的边框样式。你可以通过它控制边框的粗细、颜色和线条类型。边框可以应用在元素的任意一边(上、右、下、左),也可以统一设置四条边。
1. 基本语法:设置边框三要素
边框由三个基本属性组成:宽度(width)、样式(style)和颜色(color)。可以直接用简写属性 border 一次性设置:
border: 1px solid #000;这行代码表示:1像素宽的实线黑色边框,应用于四条边。
2. 分别设置边框样式
你也可以单独控制每条边,使用以下属性:
立即学习“前端免费学习笔记(深入)”;
- border-top: 设置上边框
- border-right: 设置右边框
- border-bottom: 设置下边框
- border-left: 设置左边框
这样只给元素顶部添加一条2像素红色虚线边框。
3. 单独设置边框的某一部分
如果只想修改边框的一个方面,比如只改颜色或只改粗细,可以用:
- border-width: 设置边框粗细(如 1px, 2em, thin, medium, thick)
- border-style: 设置线条样式(如 solid 实线、dashed 虚线、dotted 点线、none 无边框等)
- border-color: 设置边框颜色
border-width: 3px;
border-color: blue;
效果等同于:border: 3px dotted blue;
4. 圆角边框
使用 border-radius 可以让边框变成圆角:
border-radius: 10px;数值越大,圆角越明显。也可以分别设置四个角,如 border-radius: 5px 10px 15px 20px;
基本上就这些。通过组合 border 的各种属性,你可以灵活地为任何盒子添加想要的边框效果。不复杂但容易忽略细节,比如忘记设置 border-style 会导致边框不显示(即使设置了宽度和颜色)。










