CSSでのボーダーの基本

ここでは、要素にボーダーを追加する方法を学びます。これは、3つのプロパティを使用して行われます：プロパティ border-width はボーダーの太さを設定し、border-color は色を、border-style はボーダーの種類を設定します。

最初の2つのプロパティは明らかな方法で動作します： border-color は、プロパティ color と同じ形式で色を受け付け、ボーダーの太さはピクセル単位で指定します。しかし、プロパティ border-style はキーワード形式の値を受け付けます。例えば、値 solid は実線を指定します。

例えば、太さ 3 ピクセル、実線、赤色のボーダーを作成してみましょう：

<div id="elem"></div>

#elem {
	border-width: 3px;    /* 太さ 3px */
	border-style: solid;  /* 実線 */
	border-color: red;    /* 赤色 */
	width: 300px;
	height: 100px;
}

次のレッスンでは、ボーダーの操作についてより詳しく見ていきます。