1.【border】边框（布局时会占用空间）

【border】设置边框

    border: 边框线宽度（px） 边框类型 边框颜色;

边框方向(border)

【border-top】上边框
【border-right】右边框
【border-left】 左边框
【border-bottom】下边框

边框线宽度（border-width）[一般直接写：px,各个方向的边框各自设定]

可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

【thin】定义细的边框。
【medium】默认。定义中等的边框。
【thick】定义粗的边框。

统一设置格式：

border-width: 上 右 下 左;
border-width: 上下 左右;

边框类型(border-style):

参数值：

【solid】实线
【dotted】点线
【dashed】虚线
【groove】定义 3D 坡口边框。效果取决于 border-color 值（立方盒子，如水槽）
【ridge】定义 3D 脊线边框。效果取决于 border-color 值（空心梯台）
【inset】定义 3D inset 边框。效果取决于 border-color 值 （向内边框，如房子地面）
【outset】定义 3D outset 边框。效果取决于 border-color 值 （向外边框，如房子墙）
【none】定义无边框
【hidden】定义隐藏边框

也可以设置各个方向的样式：（依然遵循:上 右 下 左）

border-style: dotted solid double dashed;

• 上边框是虚线
• 右边框是实线
• 下边框是双线
• 左边框是虚线 如果 border-style 属性设置三个值：（依然遵循:上 左右 下）

border-style: dotted solid double;

• 上边框是虚线
• 右和左边框是实线
• 下边框是双线

如果 border-style 属性设置两个值：（依然遵循:上下 左右）

border-style: dotted solid;

• 上和下边框是虚线
• 右和左边框是实线

如果 border-style 属性设置一个值：（依然遵循:都是一样的，默认）

border-style: dotted;

• 四条边均为虚线

边框颜色(border-color)

可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

例如：border-color: red green yellow pink;

圆角边框（border-radius）

参数值：

【px】圆角的形状。
【%】以百分比定义圆角的形状。

设置方式：

• 一个值： 四个圆角值相同

• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角 （交叉记忆：左上右下 右上左下）

• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 （Z字形： 左上 右上左下 右下）

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 （顺时针：左上 右上 右下 左下）

也可以单独设置一角的弧度

左上角的弧度：【border-top-left-radius】

右上角的弧度：【border-top-right-radius】

左下角的弧度：【border-bottom-left-radius】

右下角的弧度：【border-bottom-right-radius】

2.【outline】轮廓线（不影响布局）

注意：轮廓与边框不同！

不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

【outline】设置轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

    outline: 轮廓线宽度（px） 轮廓类型 轮廓颜色;

轮廓线宽度（outline-width）:[跟边框一样，也可以设置为px]

【thin】通常为 1px。
【medium】通常为 3px。
【thick】通常为 5px。

轮廓线类型(outline-style):[与边框一致]

参数值：

【solid】实线
【dotted】点线
【dashed】虚线
【groove】定义 3D 坡口边框。效果取决于 border-color 值（立方盒子，如水槽）
【ridge】定义 3D 脊线边框。效果取决于 border-color 值（空心梯台）
【inset】定义 3D inset 边框。效果取决于 border-color 值 （向内边框，如房子地面）
【outset】定义 3D outset 边框。效果取决于 border-color 值 （向外边框，如房子墙）
【none】定义无边框
【hidden】定义隐藏边框

轮廓颜色(outline-color):[跟边框相同]

【invert】反转颜色

颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的

    outline-color: invert;