CSS Border(边框)

元素的(Border)边框围绕填充和内容。

CSS边框属性

CSS边框属性允许您定义框的边框区域。边框可以是预定义的样式，例如实线，双线，虚线等，也可以是图像。下一节将介绍如何设置各种属性，以定义边框的样式（border-style），颜色（border-color）和厚度（border-width）。

(border-width)边框宽度属性

border-width属性指定边框区域的宽度。下面是一种速记属性，用于同时设置元素边框的所有四个边的厚度。

p {
    border-width: medium 10px thick 15px;
}

(border-style)边框样式属性

该border-style属性设置框边框的样式，例如：solid，dotted等。它是用于设置元素边框所有四个侧面的线型的简写速记属性。

该border-style属性可采取以下值之一：none，hidden，dashed，dotted，double，groove，inset，outset，ridge和solid。

p {
    border-style: dotted;
}

(border-color)边框颜色属性

该border-color属性指定color框的边框。这也是用于设置元素边框所有四个侧面的颜色的简写属性。

p {
    border-style: solid;
    border-color: #ff0000;
}

边框简写速记属性

该border CSS属性是设置一个或多个单独的边框属性的速记属性border-style，border-width和border-color在一个单一的规则。

p {
    border: 5px solid #ff4500;
}

如果在设置border速记属性时忽略或未指定单个border属性的值，则将使用该属性的默认值（如果有）。

在此示例中，边框将是宽度为5px的黑色实线：

p {
    color: black;
    border: 5px solid;
}

但是，在有border-style属性的情况下，省略该值将不会显示任何边框，因为这个时候border-style属性 的默认值为none。

在下面的示例中，将没有边框：

p {
    border: 5px #00ff00;
}