border

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

.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