CSSでのボーダーの基本

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

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

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

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

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

Результат:

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