The border of CSS

1.border-width does not support percentages

Properties: thin:1px medium:3px (default) thick:5px

2.border-style:double Double Line
Implement three horizontal lines apart
{
width:120px;height:120px;
border-top:60px Double;
border-bottom:20px solid;
}

3.border-color and color
Like both,
. add{
Color: #ccc '
Transition:color. 25s;
BORDER:1PX Solid
}
. add:hover{
Color: #06c
}
All elements can be hover color by setting color on the parent element only

4.border and background positioning
(1) Background-position default relative to the left upper position
(2) using border to achieve relative right positioning
{
border-right:50px Solid Transparent
background-position:100% 40px;
}

5.border and triangular lamp graphic construction

. a{
width:100px;
height:100px;
border:100px solid;
Border-color:red Green Blue Orange;
}

Change the width and height and border-color to achieve different shapes.

6. Achieve trapezoid

. a{
width:600px;
border:100px solid;
Border-color:transparent Transparent #c00;
}

The border of CSS