border-width is not support percent
no meaning (desktop or mobile use the same border)
-
default value is 3px
-- thin(1px)
-- medium(3px) . (need to implement border-style: double)
-- thick (5px)
boder-style
- dash
Paste_Image.png
- doted
Only in IE
.box {
width: 150px; height: 150px;
overflow: hidden;
}
.dotted {
width: 100%; height: 100%;
border: 149px dotted #cd0000;
}
Paste_Image.png
- double
{
width: 120px;
height:20px;
border-top: 60px double;
border-bottom: 20px solid;
}
Paste_Image.png
Paste_Image.png
boder color
color is boder-color
same as box-shadow, text-shadow ...
Paste_Image.png
<a class="add"/>
.add{
border: 1px solid #ccc;
}
.add:before, .add:after {
background: #ccc;
}
.add:hover{
border-color: #06c;
}
.add:hover:before, .add:hover:after {
background: #06c;
}
.add {
color: #ccc;
transition: color .25s;
border: 1px solid;
}
.add:before {
border-top: 10px solid;
}
.add:after {
border-left: 10px solid;
}
border position
background-position has limitation in CSS2.1, it can only position related to the left top
so we can use a transparent border as right padding
Paste_Image.png
border & triangle
Paste_Image.png
Paste_Image.png
Paste_Image.png
boder transparent
Paste_Image.png
Paste_Image.png
but chrome can not use above solution
Paste_Image.png
boder layout
same height sider bar
but this solution can not support %
Paste_Image.png
