How do you add a border to an element in CSS?

在CSS中为元素添加边框，我们可以使用border属性。这个属性允许我们定义边框的样式、宽度和颜色。下面是如何使用border属性的基本语法和示例。

1. 基本语法

css
selector {
  border-style: solid; /* 定义边框的样式 */
  border-width: 2px;   /* 定义边框的宽度 */
  border-color: blue;  /* 定义边框的颜色 */
}

2. 使用简写属性

我们也可以使用border的简写属性，一次性设置所有的边框属性（样式、宽度、颜色）：

css
selector {
  border: 2px solid blue;
}

3. 示例

假设我们想为一个<div>元素添加边框：

HTML:

html
<div class="bordered-box">这是一个带边框的盒子</div>

CSS:

css
.bordered-box {
  border: 3px solid red;
}

这段代码会给<div>元素添加一个3像素宽、红色、实线的边框。

4. 不同的边框样式

CSS 提供多种边框样式，比如 dotted（点状）、dashed（虚线）、solid（实线）、double（双线）等。可以根据需求选择不同的样式。

5. 针对不同边

如果需要对元素的不同边设置不同的边框，可以使用border-top、border-right、border-bottom、border-left来分别设置：

css
selector {
  border-top: 2px dotted green;
  border-right: 2px solid blue;
  border-bottom: 4px dashed red;
  border-left: 3px double black;
}

通过以上方法，你可以灵活地为HTML元素添加和定义边框样式，以达到想要的视觉效果。