最終更新日 2021年4月7日

borderプロパティ

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

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

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

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

CSS3での変更点

特にありません

初期値	適用先	継承
各プロパティの初期値	すべての要素	なし

サンプルコード

border: 2px solid #f00;
border: thin dotted rgb(255,0,0);
border: thick double hsla(0,255%,128%,0.5);

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。