CSS边框border属性

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS边框

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

边框与背景

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

边框的样式

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS 的 border 属性定义了 10 个不同的样式非 inherit 样式，包括 none。

属性代码格式

border元素可以设置（left ， right， top ， bottom ）四个控制border的边框上下左右的属性
1，none 定义无边框

.box{border-style: none}

2，hidden 与“none”相同。不过应用于表时除外，hidden用于解决边框冲突。

.box{border-style: hidden;}

3，dotted 定义点状边框。在大多数浏览器中呈现为实线。

.box{border-style: dotted;}

4，dashed 定义虚线。在大多数浏览器中呈现为实线。

 .box{border-style: dashed;}

5，solid 定义实线（比较常用）。

 .box{border-style: solid;}

6，double 定义双线。双线的宽度等于 border-width 的值。

    .box{border-width: 10px;border-style: double;}

7，groove 定义 3D 凹槽边框。其效果取决于 border-color和border-width 的值。

     .box{border-width: 30px;border-color: aqua;border-style: groove;}

8，ridge 定义 3D 垄状边框。其效果取决于 border-color和border-width 的值。

   .box{border-width: 30px;border-color: bisque;border-style: ridge;}

9，inset 定义 3D inset 边框。其效果取决于 border-color和border-width 的值。

     .box{border-width: 30px;border-color: bisque;border-style: inset;}

10，outset 定义 3D outset 边框。其效果取决于 border-color 和border-width的值。

     .box{border-width: 30px;border-color: olive;border-style: outset;}

11， inherit 规定应该从父元素继承边框样式。

     .box1{border-width: 30px;border-color: olive;border-style: outset;}.box2  {border-style: inherit;border-width: 10px;}