# 边框样式

URL: https://caijiao.org/css/05-box-model/04-border
Source: docs/css/05-box-model/04-border.md
Description: 边框样式定义元素边框的宽度、颜色和形状，是美化和布局的重要手段。

CSS 的边框属性用于控制元素边框的宽度、颜色、样式等，常用属性包括 `border-width`、`border-style` 和 `border-color`。

## 1. 边框宽度（border-width）

指定边框的粗细：

```css
border-width: 2px;
```

## 2. 边框样式（border-style）

边框的样式，如实线、虚线、点线等：

```css
border-style: solid; /* 实线 */
border-style: dashed; /* 虚线 */
border-style: dotted; /* 点线 */
border-style: double; /* 双线 */
border-style: groove; /* 凹槽效果 */
border-style: ridge; /* 脊状效果 */
border-style: inset; /* 内嵌效果 */
border-style: outset; /* 外凸效果 */
border-style: none; /* 无边框 */
```

## 3. 边框颜色（border-color）

设置边框颜色：

```css
border-color: #333;
border-color: red;
```

## 4. 复合写法

简写方式同时设置宽度、样式和颜色：

```css
border: 2px dashed blue;
```

---

## 边框样式示例

[在线代码演示](/css/demos/9.html)