最終更新日

borderプロパティ

borderは、ボーダーに関するプロパティの値をまとめて記述するプロパティです。

値は、border-widthborder-styleborder-colorの値を、好きな順番で並べます。

borderは、border-imageを初期値に戻すことができるため、CSS3では、罫線に関する他のプロパティよりもborderプロパティを優先的に使用することが推奨されています。

borderでは、要素を囲む4本の罫線の太さ、種類、色はすべて同じ値に設定されます。それぞれの罫線を個々の値で設定したい場合は、borderで基本の罫線の値を指定した後に、変更したい箇所の罫線のみ、下記プロパティを使って別々に設定します。

border-top
border-right
border-bottom
border-left

CSS3での変更点
特にありません
初期値 適用先 継承
各プロパティの初期値 すべての要素 なし
説明
border-widthの値 ボーダーの太さ
border-styleの値 ボーダーの種類
border-colorの値 ボーダーの色
サンプルコード
border: 2px solid #f00;
border: thin dotted rgb(255,0,0);
border: thick double hsla(0,255%,128%,0.5);
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME