使用border属性：
border属性是一个简写属性，用于设置以下四个边框属性：
border-width: 定义边框的宽度。
border-style: 定义边框的样式。可能的值包括dotted、dashed、solid、double、groove、ridge、inset和outset。
border-color: 定义边框的颜色。
border-radius: （可选）定义边框的圆角。
示例：
div {
border: 1px solid black; /* 宽度为1像素、样式为实线、颜色为黑色的边框 */
border-radius: 5px; /* 可选的圆角 */
}
使用单独的边框属性：
你可以分别设置每个边的边框样式、宽度和颜色。例如：
border-top: 设置上边框。
border-right: 设置右边框。
border-bottom: 设置下边框。
border-left: 设置左边框。
示例：
div {
border-top: 2px dashed red; /* 上边框：宽度为2像素、样式为虚线、颜色为红色 */
border-right: 3px dotted green; /* 右边框：宽度为3像素、样式为点线、颜色为绿色 */
border-bottom: 4px solid blue; /* 下边框：宽度为4像素、样式为实线、颜色为蓝色 */
border-left: 5px double purple; /* 左边框：宽度为5像素、样式为双线、颜色为紫色 */
}
使用outline属性：
虽然outline不是严格意义上的边框，但它可以在元素周围绘制一条线，通常用于突出显示元素（如聚焦状态）。outline不占用空间，也不会影响布局。
示例：
input:focus {
outline: 2px auto yellow; /* 当输入框获得焦点时，显示宽度为2像素、颜色为黄色的轮廓 */
}
使用box-shadow模拟边框：
box-shadow属性可以用来在元素周围添加阴影效果，但也可以用来模拟边框。这种方法的好处是它可以创建不影响元素实际尺寸的视觉效果。
示例：
div {
box-shadow: 0 0 0 3px rgba(0, 0, 255, 1); /* 水平偏移0、垂直偏移0、模糊半径0、扩展半径3像素，颜色为蓝色 */
}
使用伪元素（::before 或 ::after）：
你可以使用伪元素来创建一个看起来像是边框的效果。这种方法更加灵活，允许你创建复杂的边框效果，比如带有图案或渐变的边框。
示例：
div {
position: relative; /* 为伪元素定位 */
}
div::before {
content: ""; /* 伪元素的内容为空 */
position: absolute; /* 绝对定位 */
top: 0; right: 0; bottom: 0; left: 0; /* 与父元素对齐 */
border: 3px solid orange; /* 设置边框 */
z-index: -1; /* 确保伪元素位于父元素之后 */
}
使用SVG或背景图像：
对于更复杂的边框设计，如不规则形状或特殊图案，你可以使用SVG（可缩放矢量图形）或背景图像来实现。这种方法提供了高度的自定义性。
使用CSS3的border-image属性：
border-image属性允许你使用图像作为元素的边框。你可以指定图像的切片方式以及如何缩放和重复图像来填充边框。
示例：
div {
border: 10px solid transparent; /* 设置边框宽度和透明度 */
border-image: url('border.png') 30% round; /* 使用图像作为边框，并指定切片、宽度和重复方式 */
}