borderのいろいろ

borderを使っていろいろな表現ができます。

ここでは、borderの使い方をいくつか紹介します。 基本は、太さの組み合わせや表示するborderの位置、borderの種類です。

borderのサンプル[border-bottom]

.bordersample1 {
    border-style:solid;
    border-width:0px;
    border-bottom-width:1px;
    border-color:#a0b7c4;
}

borderのサンプル[border-left]

.bordersample2 {
    border-style:solid;
    border-width:0px;
    border-left-width:10px;
    border-color:#a0b7c4;
}

borderのサンプル[部分的に太さを変える]

.bordersample3 {
    border-style:solid;
    border-width:1px;
    border-left-width:10px;
    border-color:#a0b7c4;
}

borderのサンプル[inset outset]

.bordersample4{
    border-style:none inset none outset;
    border-width:0px;
    border-left-width:10px;
    border-color:#a0b7c4;
}