一、 border-style 属性
`border-style` 属性定义了边框的样式。CSS 提供了多个样式用于定义边框，其值可以是：`solid`、`dotted`、`dashed`、`double`、`groove`、`ridge`、`inset`、`outset`。下面我们来举例说明： .class {
border-style: solid;
}
.class1 {
border-style: dashed;
}
.class2 {
border-style: outset;
}
与此类似，您还可以使用 `border-top-style`、`border-right-style`、`border-bottom-style` 和 `border-left-style` 属性分别给元素的上、右、下、左边添加不同的样式边框。
二、 border-width 属性
`border-width` 属性定义边框的宽度。可取值为：像素(px)、百分比（%）或其它固定的长度计量单位。下面是一个例子： .class {
border-style: solid;
border-width: 2px;
}
.class1 {
border-style: dashed;
border-width: 4px 1px 3px 5px;
}
此外，您还可以使用 `border-top-width`、`border-right-width`、`border-bottom-width` 和 `border-left-width` 属性分别给元素的上、右、下、左边的宽度设置不同的值。
三、 border-color 属性
`border-color` 属性定义边框的颜色。下面是一个例子： .class {
border-style: solid;
border-color: red;
border-width: 2px;
}
.class1 {
border-style: dashed;
border-color: #000000;
border-width: 1px;
}
在这个例子中，`.class` 的边框将是2像素宽的红色边框，而 `.class1` 的边框将是1像素宽的黑色虚线边框。
四、 border-radius 属性
`border-radius` 属性可以给HTML元素的角落增加一些弧形。另外，设置 `border-radius` 还可以改变视觉上所有边缘的外观。下面是一个例子： .class {
border-radius: 10px;
}
.class1 {
border-radius: 50%;
}
在上面的例子中，`.class` 设置一个10像素的边角半径，这意味着元素的边角将以10像素的大小进行渲染。`.class1` 将边角设置为一个半径长度等于边框框架高度的50%。
五、border-image 属性
`border-image` 属性可以使得边框由图片创建而成。下面是一个例子： .class {
border-image-source: url(border.png);
border-image-slice: 30 24 24 30;
border-image-width: 30px 24px 24px 30px;
border-image-outset: 0 0 0 0;
border-image-repeat: round;
}
在上面的例子中，`.class` 边框将被设置为一个由图片 `border.png` 创建而成的四个部分。`border-image-slice` 指定了图片中边框的四个切片。`border-image-width` 指定了边框每个切片的宽度。`border-image-outset` 将边框从其容器矩形的内侧扩展开来，并覆盖一些将要呈现的内容。`border-image-repeat` 指定了如何重复边框图像，可以是 `stretch`、`repeat` 或 `round`（启用扩展）。
六、边框及其它CSS属性
通过了解CSS `border`属性，我们可以创建和控制鲜艳、有趣、具有个性的页面。但是用于边框的CSS属性只是其中的一部分。我们还可以用 CSS 定义文本的 `font-size`、`color`，以及其他 CSS 属性，来控制 HTML 中的背景、元素、文本和链接。 这里还提供一些额外使用的CSS属性，可以使得样式更加丰富：- `box-shadow` 设置元素的阴影效果；
- `text-shadow` 设置文本的阴影效果；
- `opacity` 定义元素的透明度。