如有关CSS框模型的文字所述，HTML元素周围可以有边框。边框可以是实心的，虚线的，三维的，具有圆角的，甚至可以在边框中使用图像。

使用各种CSS边框属性指定边框。本文介绍了这些边框属性。

CSS边框属性

使用以下CSS边框属性设置边框样式：

• border
• border-width
• border-style
• border-color
• border-top
• border-right
• border-bottom
• border-left
• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color
• border-radius
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

以下各节将说明这些用于边框样式的CSS属性。

边界

" border" CSS属性设置HTML元素周围的边框，这意味着所有四个边框(顶部，右侧，底部和左侧)。 " border" CSS属性值包含三个部分：

• 边框宽度
• 边框样式
• 边框颜色

当设置border属性时，每一个部分都用空格隔开。这是一个例子：

#theDiv {
    border : 1px solid #000000;
}

第一个值是" 1px"，即边框宽度。此值将HTML元素周围的边框设置为1像素的宽度。边框宽度是使用任何有效CSS单位指定的。

第二个值是" solid"，即边框样式。此值将边框设置为实线，这意味着一条简单的线(无虚线，无3D效果等)。我们可以选择更多样式。这些将在以后介绍。

第三个值是"#000000"，即"边框颜色"。此值将边框颜色设置为黑色。边框颜色是使用CSS颜色格式指定的。

边框宽度

border-widthCSS属性可用于设置HTML元素周围边框的宽度。 border-widthCSS属性的值是使用任何有效CSS单位指定的。这是一个例子：

#theDiv {
    border-width: 2px;
}

此示例CSS规则将CSS规则选择的HTML元素的边框宽度设置为2像素。

边框样式

border-styleCSS属性可用于设置HTML元素周围边框的边框样式。可以用于border-styleCSS属性的有效值为：

• solid
• dotted
• dashed
• double
• groove
• ridge
• inset
• outset
• none
• hidden

" none"和" hidden"值具有相同的作用。它没有边框。

以下是这些边框样式在呈现时的外观的一些直观示例：

solid

dotted

dashed

double

groove

ridge

inset

outset

请注意，前三个示例的边框宽度设置为2px，后一个示例的边框宽度设置为6px。某些边框样式要求边框宽度大于2px才能真正看到它们的效果。

边框颜色

border-colorCSS属性设置边框的颜色。 border-colorCSS属性可以接受任何有效的CSS颜色。这是一个border-color的例子：

#theParagraph {
    border-width: 2px;
    border-style: solid;
    border-color: #ff00ff;
}

这是该示例在呈现时的外观：

border-color示例。

上边框，右边框，下边框，左边框

" border-top"，" border-right"，" border-bottom"和" border-left"属性与" border"属性的工作方式相同，但这些CSS属性仅配置边框的一部分(顶部，左，下或者右边框)。这些属性以相同的方式配置。这是一个例子：

#theDiv {
    border-left: 1px solid #000000;
}

本示例将所选HTML元素的左边框设置为1像素宽的实心黑色边框。这是在浏览器中呈现时的外观：

具有" border-left：1px solid#000000"的元素

其他Border CSS属性

border的最后CSS属性(" border-top-width"，" border-top-style"，" border-top-color"等)的工作方式与" border-width"，" border-style"相同和"边框颜色"属性，但这些最后的边框属性仅在边框的一部分(顶部，右侧，底部或者左侧)上设置。

这是一个例子：

#theDiv {
    border-top-width: 2px;
    border-top-style: dashed;
    border-top-color: #cccccc;
}

本示例将所选元素的顶部边框设置为4像素宽的虚线灰色边框。这是在浏览器中呈现时的外观：

具有border-top-width：2px;的元素； border-top-style：虚线； border-top-color：#cccccc;

边界半径

border-radiusCSS属性是CSS 3.0中的新增功能。 border-radiusCSS属性用于在HTML元素上创建边框的圆角。在只有使用表格和图像才能在HTML元素上使用"边界半径"圆角时，HTML既繁重，又为浏览器下载繁重。幸运的是，" border-radius" CSS属性使我们免于这种痛苦。

这是一个"边界半径"示例：

#theDiv {
    border        : 1px solid #cccccc;
    border-radius : 10px;
    padding       : 10px;
}

这是应用了以下CSS样式的div元素的外观：

如我们所见，div元素现在具有圆角。舍入的半径为10个像素，因为我在" border-radius" CSS属性声明中将" 10px"设置为半径(值)。

即使HTML元素没有边框，" border-radius" CSS属性也可以使用背景色。这是一个border-radius和background-color的例子：

#theDiv {
    background-color: #66ff66;
    border-radius : 20px;
    padding       : 10px;
}

这是渲染时的"边界半径"和"背景颜色"的样子：

我们可以在垂直和水平方向上指定倒圆的半径。这样，我们可以使盒子的角变为椭圆形而不是圆形。这是一个例子：

#theDiv {
    border        : 1px solid #cccccc;
    border-radius : 20px / 10px;
    padding       : 20px;
}

这是渲染边框时的样子：

如我们所见，四舍五入的水平方向(20px)比垂直方向(10px)长。

我们还可以通过为border-radiusCSS属性指定四个值来分别设置每个角的圆角。这是一个例子：

#theDiv {
    border        : 1px solid #cccccc;
    border-radius : 20px 15px 10px 5px;
    padding       : 20px;
}

角的顺序为：左上，右上，右下，左下。它类似于borderCSS属性中的边框顺序(顶部，右侧，底部，左侧)。

渲染时的拐角如下所示：

如我们所见，边框的每个角都有不同的圆角半径。

我们还可以像这样在每个角的水平和垂直方向上设置倒圆角：

#theDiv {
    border        : 1px solid #cccccc;
    border-radius : 40px 20px 10px 5px / 20px 10px 5px 2px;
    padding       : 20px;
}

在" /"的左边是每个角的水平半径，在" /"的右边是每个角的垂直半径。

这是渲染时边框的外观：

就像borderCSS属性一样，border-radius属性具有一组子属性，可以分别设置每个角的半径。这些子属性是：

• border-top-left-radius
• border-top-right-radius
• 边界右下半径
• border-bottom-left-radius

设置角的倒圆半径的语法与" border-radius"的语法相同。这里有一些例子：

#theDiv {
    border                 : 1px solid #cccccc;
    border-top-left-radius  : 40px;
    border-top-right-radius : 40px / 20px;
}

如我们所见，我们也可以使用这些子属性创建圆角和椭圆角。

边框图片

CSS 3使我们可以通过border image CSS属性在边框内使用图像。边框图像CSS属性为：

• border-image-source
• border-image-slice
• border-image-repeat

除了这些边框图像CSS属性之外，我们还必须将" border-style"设置为" solid"(才能在Firefox中使用)。我们还必须将" border-width"设置为我们希望边框具有的任何宽度(边框图像将被调整大小以适应" border-width")。请记住，我们可以为每个边框分别设置边框宽度。

边框图像源

border-image-sourceCSS属性用于引用该图像以用作边框图像。这是一个border-image-source示例：

border-image-source: url('/images/css/border-image.png');

边界图像切片

border-image-sliceCSS属性可以采用一到四个值。这些一到四个值是切片坐标。切片坐标(x1，y1，x2，y2)的含义如下图所示：

注意四个坐标" x1，y2，x2，y2"。当我们分别通过x1和x2绘制一条垂直线，并通过y1和y2绘制一条水平线时，最终总共有4条线。这些线将图像切成9片。这9个切片将应用于目标HTML元素的边框。

如果指定的坐标少于4个，浏览器将从我们指定的值中推断所有四个坐标。例如，如果我们只写" 50"，则浏览器将假设意思是从图像的每个边缘开始进入50个像素。如果我们编写" 50 100"，则浏览器将假设意思是从图像的左右边缘开始分别为50像素和100％。

这是一个实时的"边界图像"示例。如果我们调整浏览器窗口的大小，可以看到边框图像是如何拉伸以适合应用于其的div元素的。

这是带有边框图像的div。

这是用于创建此边框图像的代码：

<style>
    #withBorderImage1  {
        border-image-source: url('/images/css/border-image.png');
        border-image-slice: 70;
        border-image-repeat: stretch;
        height : 300px;
        border-width: 70px;
        border-style: solid;
    }
</style>

<div id="withBorderImage1">
    Here is a <code>div</code> with border image.
</div>

注意如何将" border-image-slice"设置为一个值：" 70"。这意味着应该从图像的每个边缘将图像切成70个像素。

还要注意如何将"边框宽度"设置为" 70px"。由于我们使用的是边框图像中70像素宽的切片，因此"边框宽度"应设置为70像素，以便能够正确显示边框。如果我们为" border-width"指定了" 35px"的值，则边框图像在呈现为边框之前会从70像素调整为35像素。

最后，请注意如何将"边框样式"设置为"实体"。如果没有此设置，则在编写Firefox时不会渲染边框图像。

边框图像重复

如果边框图像和HTML元素的尺寸不相同，则border-image-repeatCSS属性用于定义如何在HTML元素的边框内重复边框图像的各部分。

border-image-repeatCSS属性可以接受以下值之一：

• stretch（拉伸）
• repeat（重复）
• round（环绕）
• space（空白）

值" stretch"表示切片将被拉伸/缩放以适合其所应用边框的宽度或者高度。

值'repeat'表示将切片该切片以适合其所应用边框的宽度或者高度。

值round表示切片将被重复多次。重复的切片将被拉伸以完全适合其所应用的边界。

值space表示切片将重复完整次，但不是拉伸切片(如在" round"中那样)，而是在重复的切片之间插入空格。