CSS borderプロパティ


例

4つの枠線のスタイルを設定する:

p { border:5px solid red; }

試してみる »

タグの定義と使用説明

border は枠線プロパティのショートハンドです。

CSS の border プロパティは、要素の枠線のスタイル、幅、色を指定するために使用します。

設定できるプロパティは(順番に)border-width、border-style、border-color です。

1つの値だけを設定することもできます。例:border:#FF0000;これは正しいです。他の値は対応するプロパティの初期値に設定されます。

構文形式

下記の1つ、2つ、または3つの値を使用して border プロパティを指定できます。値の順序は重要ではありません。

/* 枠線のスタイル */
border: solid;

/* 枠線の幅 | 枠線のスタイル */
border: 2px dotted;

/* 枠線のスタイル | 枠線の色 */
border: outset #f33;

/* 枠線の幅 | 枠線のスタイル | 枠線の色 */
border: medium dashed green;

/* グローバル値 */
border: inherit;
border: initial;
border: unset;

注意:枠線のスタイルが定義されていない場合、枠線は表示されません。スタイルの初期値が none であるためです。

初期値: not specified
継承: no
バージョン: CSS1
JavaScript 構文: object object.style.border="3px solid blue"


ブラウザサポート

表内の数字は、そのプロパティをサポートしている最初のブラウザのバージョン番号を示します。

プロパティ
border 1.0 4.0 1.0 1.0 3.5

プロパティ値

值 説明
border-width 枠線の幅を指定します。
border-style 枠線のスタイルを指定します。
border-color 枠線の色を指定します。
inherit 親要素から border プロパティの値を継承することを指定します。


関連記事

CSS チュートリアル:CSS ボーダー

その他の拡張