要素の境界線を表示するborderプロパティには、3つの関連したプロパティがあります。ここでは3つのプロパティの使い方とショートハンドについてお話します。
コンテンツ
線の色を決めるborder-colorプロパティ
border-colorプロパティは線の色を指定するプロパティです。border-color:#000000;
といった形でカラーコードなどを指定しましょう。
カラーコードのことが良く分からないという方はこちらもご参照ください。
線の幅を指定するborder-widthプロパティ
border-widthプロパティは、線の太さを指定するプロパティです。border-width:3px;
といった形で「px」で指定するといいですね。
線のスタイルを指定するborder-styleプロパティ
線の種類は一般的な「実線」の他にも「点線」「破線」といった種類があります。border-style:solid;
という形で指定します。下記に一覧を表示させてみたのでご覧ください。
線の幅・スタイル・カラーを同時に指定できるborderプロパティ
borderプロパティを使うと、上記でお話した3つのプロパティをショートハンドすることができます。borderのあとにwidth, stylr, colorの3つの値を順番に関係なく半角スペースを空けて記入しましょう。
例:
CSS
.example01{ border:#0A96D7 6px solid; } .example02{ border:solid #0A96D7 6px; } .example03{ border:#0A96D7 6px solid; }
上記は、値の順番がすべてバラバラになっていますが値そのものが同じなのですべて線のデザインが同じになります。
borderを表示したい辺を指定するプロパティ
borderの指定は四辺だけでなく、上下左右を個別に指定することもできます。
それぞれ
上:border-top
、下:border-bottom
、右:border-right
、左:border-left
(左)
という形で指定します。さらに細かくborder-top-color, border-top-width, border-top-styleなどの指定も可能ですが、ここまでお読みでしたらショートハンドを使った方が効率的だというのはお分かりですね。
以上がborderに関するプロパティのお話でした。いかがだったでしょうか?今まで何となく使いこなせてきたborderプロパティでも意外と知らなかったこともあったのではないでしょうか。最後までお読みいただきましたありがとうございます。