一、常用边框样式
在 CSS 中，我们可以通过边框样式（border-style）属性来定义边框的样式。以下是常用的几种边框样式：1. 实线边框样式（solid）
实线边框样式是最常用的一种边框样式，它使用实线作为边框的样式。以下是使用实线样式定义边框的代码：
.box {
border-style: solid;
}
在实际使用中，我们也可以同时定义边框的宽度和颜色：
.box {
border: 1px solid black;
}
2. 虚线边框样式（dashed）
虚线边框样式使用虚线作为边框的样式。以下是使用虚线样式定义边框的代码：
.box {
border-style: dashed;
}
同样可以同时定义边框的宽度和颜色：
.box {
border: 1px dashed black;
}
3. 点线边框样式（dotted）
点线边框样式使用点线作为边框的样式。以下是使用点线样式定义边框的代码：
.box {
border-style: dotted;
}
同样可以同时定义边框的宽度和颜色：
.box {
border: 1px dotted black;
}
4. 双线边框样式（double）
双线边框样式使用两条线作为边框的样式。以下是使用双线样式定义边框的代码：
.box {
border-style: double;
}
同样可以同时定义边框的宽度和颜色：
.box {
border: 1px double black;
}
5. 嵌入边框样式（inset）
嵌入边框样式使用内凹的效果作为边框的样式。以下是使用嵌入样式定义边框的代码：
.box {
border-style: inset;
}
同样可以同时定义边框的宽度和颜色：
.box {
border: 1px inset black;
}
6. 浮出边框样式（outset）
浮出边框样式使用外凸的效果作为边框的样式。以下是使用浮出样式定义边框的代码：
.box {
border-style: outset;
}
同样可以同时定义边框的宽度和颜色：
.box {
border: 1px outset black;
}
二、边框的宽度和颜色
除了边框样式之外，我们也可以设置边框的宽度和颜色。在 CSS 中，我们可以通过以下两个属性来设置边框的宽度和颜色：1. 边框宽度属性（border-width）
边框宽度属性用于设置边框的宽度。以下代码使用 2px 的宽度定义了一个实线边框：
.box {
border-style: solid;
border-width: 2px;
}
同样可以同时定义边框的样式和颜色：
.box {
border: 2px dotted black;
}
2. 边框颜色属性（border-color）
边框颜色属性用于设置边框的颜色。以下代码使用红色的颜色定义了一个实线边框：
.box {
border-style: solid;
border-color: red;
}
同样可以同时定义边框的样式和宽度：
.box {
border: 2px dashed blue;
}
三、圆角边框样式
除了常规的边框样式之外，CSS 还提供了圆角边框样式。圆角边框样式使用圆角来代替正常的直角边框，从而使页面元素更加美观。以下是常用的圆角边框样式：1. 圆形边框样式（border-radius）
圆形边框样式通过设置四个角的半径来生成圆形效果。以下代码定义了一个圆形边框：
.box {
border-radius: 50%;
}
2. 椭圆形边框样式
椭圆形边框样式通过设置四个角的两个半径来生成椭圆形效果。以下代码定义了一个椭圆形边框：
.box {
border-radius: 50% / 25%;
}
3. 自定义圆角边框样式
我们也可以只为某个角定义圆角效果。以下代码只为左上角和右下角定义了圆角效果：
.box {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}