border-top、 border-right、 border-bottom、 border-left、 border-style、 border-width、 border-color : 境界線 CSSプロパティ

.top    {    border-top:    solid   4px  blue;   }
.right  {    border-right:  solid   4px  blue;   }
.bottom {    border-bottom: solid   4px  blue;   }
.left   {    border-left:   solid   4px  blue;   }

<div class="top">       top     </div>
<div class="right">     right   </div>
<div class="bottom">    bottom  </div>
<div class="left">      left    </div>

.sample   {
    border-top:     solid   5px   red;
    border-right:   dashed  7px   blue;
    border-bottom:  dotted  6px   purple;
}

<div class="sample">
    sample
</div>

.sample   {
    border-top:     solid   5px   blue;
    border-right:   solid   5px   blue;
    border-bottom:  solid   5px   blue;
}

.sample   {
    border-top:     solid   5px   blue;
    border-right:   dashed  5px   blue;
    border-bottom:  dotted  5px   blue;
}

.sample   {
    border-top:     solid  5px   blue;
    border-right:   solid  7px   blue;
    border-bottom:  solid  9px   blue;
}

.sample   {
    border-top:     solid  5px   blue;
    border-right:   solid  5px   purple;
    border-bottom:  solid  5px   green;
}

.sample   {
    border-top:     solid  5px   blue;
    border-right:   solid  5px   purple;
    border-bottom:  solid  5px   blue;
}

.sample   {
    border-top:     solid  5px   indigo;
    border-right:   solid  5px   purple;
    border-bottom:  solid  5px   indigo;
}

.sample   {
    border:    solid  5px   indigo;
    border-right-color:     purple;
    border-left-style:      none;
}

.sample   {
    border:    solid  5px   blue;
    border-right-color:     purple;
    border-left-style:      none;
}

.sample {
    border:  solid  4px  red;
}

<div class="sample">
    sample
</div>

.sample {
    border-style:   solid;
    border-width:   4px;
    border-color:   red;
}

<div class="sample">
    sample
</div>

.base   {  border:   solid  6px  red; }

.dotted {  border-style: dotted;      }
.thin   {  border-width: thin;        }
.green  {  border-color: green;       }

<div class="base">        base             </div>
<div class="base dotted"> base <br> dotted </div>
<div class="base thin">   base <br> thin   </div>
<div class="base green">  base <br> green  </div>

.base  {  border:  ridge  10px  blue;  }

.dotted {  border-style: dotted;      }
.thin   {  border-width: thin;        }
.green  {  border-color: green;       }

.base {    border: ridge   10px  blue;  }
.dotted {  border: dotted  10px  blue;  }
.thin {    border: ridge   thin  blue;  }
.green {   border: ridge   10px  green; }

<div class="base">   base   </div>
<div class="dotted"> dotted </div>
<div class="thin">   thin   </div>
<div class="green">  green  </div>

.base {    border: solid   6px   red;   }
.dotted {  border: dotted  10px  blue;  }
.thin {    border: ridge   thin  blue;  }
.green {   border: ridge   10px  green; }

.base   {  border: solid   6px  red;   }
.dotted {  border: dotted  6px  red;   }
.thin   {  border: solid   thin red;   }
.green  {  border: solid   6px  green; }

.sample {
    border:         6px  red;
    border-style:   dotted double;
}

<div class="sample">
    sample
</div>

.sample {
    border:         solid  red;
    border-width:   1px 10px 5px;
}

.sample {
    border:         solid  8px;
    border-color:   red blue green orange;
}

.sample {
    border-top:    solid  8px  red;
    border-right:  solid  8px  blue;
    border-bottom: solid  8px  green;
    border-left:   solid  8px  orange;
}

.base         {   border:   solid  6px  blue;     }
.top-style    {   border-top-style:     dotted;   }
.right-width  {   border-right-width:   2px;      }
.bottom-color {   border-bottom-color:  red;      }

<div class="base">              base                    </div>
<div class="base top-style">    base <br> top-style     </div>
<div class="base right-width">  base <br> right-width   </div>
<div class="base bottom-color"> base <br> bottom-color  </div>

.final-sample {
    border:    ridge  20px  #0bf;
    border-top-width:       7px;
    border-bottom-width:    14px;
    border-bottom-color:    #08c;
    border-right-color:     #0af;
}

<div class="final-sample">
    上辺と下辺を細くして<br> 
    右辺と下辺を少し濃い色にする
</div>

.final-sample {
    border:                 ridge       #0bf    ;
    border-width:           7px   20px  14px    ;
    border-bottom-color:    #08c                ;
    border-right-color:     #0af                ;
}

.red {
    border:  solid  6px  red;
    border-right-style: none;
}

.blue {
    border:         6px     blue;
    border-style:   solid   none;
}

.green {
    border:       6px  green            ;
    border-style: none none solid solid ;
}

<div class="red">   red  </div>
<div class="blue">  blue </div>
<div class="green"> green </div>