CSS 边框是用于设置元素边框的速记属性。
该CSS边框属性用于指定一个元素的边框的样式，颜色和大小。CSS 边框属性如下所示
border-style
border-color
border-width
border-radius
Border style 属性用于指定要在网页上显示的边框类型。
有一些边框样式值与边框样式属性一起使用来定义边框。
| 价值 | 描述 |
|---|---|
| none | 它没有定义任何边界。 |
| dotted | 它用于定义虚线边框。 |
| dashed | 它用于定义虚线边框。 |
| solid | 它用于定义实心边框。 |
| double | 它定义了两个具有相同边框宽度值的边框。 |
| groove | 它定义了一个 3d 凹槽边界。效果是根据边框颜色值生成的。 |
| ridge | 它定义了一个 3d 脊状边界。效果是根据边框颜色值生成的。 |
| inset | 它定义了一个 3d 插图边框。效果是根据边框颜色值生成的。 |
| outset | 它定义了一个 3d 起始边界。效果是根据边框颜色值生成的。 |
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
输出：
无边界。
一个虚线边框。
虚线边框。
一个坚实的边界。
一个双边框。
凹槽边框。
一个山脊边界。
一个内嵌边框。
一个初始边界。
border-width 属性用于设置边框的宽度。它以像素为单位设置。您还可以使用三个预定义值之一（细、中或粗）来设置边框的宽度。
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>
设置边框颜色的方法共有三种。
名称：它指定颜色名称。例如：“红色”。
RGB：指定颜色的RGB值。例如：“rgb(255,0,0)”。
Hex：它指定颜色的十六进制值。例如：“#ff0000”。
还有一种名为“透明”的边框颜色。如果未设置边框颜色，它将从元素的颜色属性继承。
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>