CSS
Webページの装飾やレイアウトをするための言語CSSの基礎知識について解説しています

ボックスに境界線を設定する – borderプロパティ

ボーダーの太さ、形状、色を指定する

ボックスの境界線「ボーダー」は「border-style」、「border-width」、「border-color」の３つのプロパティで見た目をコントロールすることができます。ただし、border-styleプロパティの規定値が「none」になっているため、通常はボーダーが非表示になっています。

プロパティ意味
border-styleボーダーの形状をキーワードで指定します
border-widthボーダーの太さを数値で指定します。
数値にpxなどの単位をつけて指定します
border-colorボーダーの色を指定します。
カラーネームやカラーコード（#000000など）で色を指定します

次のコードは、p要素の境界に指定された色で太さが10ピクセルの実線スタイルのボーダーを表示します。

<p>「border」プロパティを使用するとボックスの境界線の太さ、形状、色などを変更することができます。</p>
p {
    border-style: solid;
    border-width: 10px;
    border-color: #666666;
}

太さ、形状、色の値をまとめて指定できるborderプロパティ

border-style、border-width、border-colorの３つのプロパティは、「border」プロパティにまとめて書くことができます。borderプロパティにまとめて値を指定するとき、値と値の間は半角スペースで区切ります。3つの値はどの順番で記述してもかまいません。

p {
    border: solid 10px #666666;
}

ボーダーを各辺ごとに指定する

bordeプロパティは上下左右の4辺をまとめて指定しますが、「border-top」、「border-bottom」、「border-left」、「border-right」プロパティを使うと各辺ごとに太さ、形状、色を指定することができます。

p {
    border-top: dashed 5px #666666;
    border-bottom: dotted 5px #666666;
    border-left: solid 10px #666666;
    border-right: double 10px #666666;
}

border-styleのキーワードごとの表現の違い

border-styleプロパティに指定できるキーワードごとに境界線の表現が変わります。その違いを見てみましょう。

値表示
noneボーダーは表示されず、この値を指定するとborder-widthの値を「0」にします。ただし、表のセルなどの隣り合う要素とボーダーを共有している場合は、隣り合う要素のボーダーが指定されていればその値が優先されます。この値が初期値です。
hidden「none」とほぼ同じですが、隣り合う要素とボーダーを共有している場合は、隣り合う要素のボーダーも強制的に非表示にします。
solid1本の実線で表示されます。
double2本の実線で表示されます。2本の実線とその間の空白との合計幅がborder-widthの値と等しくなりますので、border-widthの値が2ピクセル以下では実線になってしまいます。
dotted点線で表示されます。
dashed破線で表示されます。
groove立体的に窪んだ線のとうに表示されます。
ridge「groove」の逆で、立体的に隆起した線で表示されます。
insetボーダーより内側が窪んでいるように見える線で表示されます。
outset「inset」の逆で、ボーダーより内側が隆起しているように見えるように表示されます。
.solid {
    border: solid 5px #666666;
}
.double {
    border: double 5px #666666;
}
.dashed {
    border: dashed 2px #666666;
}
.dotted {
    border: dotted 2px #666666;
}
.groove {
    border: groove 10px #666666;
}
.ridge {
    border: ridge 10px #666666;
}
.inset {
    border: inset 10px #666666;
}
.outset {
    border: outset 10px #666666;
}