要素の境界線を表示するborderプロパティには、３つの関連したプロパティがあります。ここでは３つのプロパティの使い方とショートハンドについてお話します。

線の色を決めるborder-colorプロパティ

border-colorプロパティは線の色を指定するプロパティです。border-color:#000000;といった形でカラーコードなどを指定しましょう。

カラーコードのことが良く分からないという方はこちらもご参照ください。

2017.12.01

いろんな色の指定方法とカラーコードの仕組み

今まで何気なく使ってきたカラーコードですが、これってちゃんと理解するとなかなか興味深いというか点と点が線になる体験ができるので一度、把握しておくと良いと思います。ここではコーディングで使用する色の値についてお話していきます。 光の三原色「赤・緑・青」 ...

線の幅を指定するborder-widthプロパティ

border-widthプロパティは、線の太さを指定するプロパティです。border-width:3px;といった形で「px」で指定するといいですね。

線のスタイルを指定するborder-styleプロパティ

線の種類は一般的な「実線」の他にも「点線」「破線」といった種類があります。border-style:solid;という形で指定します。下記に一覧を表示させてみたのでご覧ください。

線の幅・スタイル・カラーを同時に指定できるborderプロパティ

borderプロパティを使うと、上記でお話した３つのプロパティをショートハンドすることができます。borderのあとにwidth, stylr, colorの３つの値を順番に関係なく半角スペースを空けて記入しましょう。

例：
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プロパティでも意外と知らなかったこともあったのではないでしょうか。最後までお読みいただきましたありがとうございます。