【CSS入門】borderの書き方

こう言った疑問に答えていきます。
本日の内容は下記です。

• borderとは
• borderの種類
• borderの書き方

borderプロパティはよく使うプロパティの一つで、枠線を指定したい時に使用するプロパティです。

今回はこの「borderの書き方」について、初心者の方でもわかりやすいように解説していきたいと思います。

では早速やっていきましょう！

borderとは

borderは、枠線や境界線を表わす時に使用するプロパティです。
線の太さ、線の種類、線の色を指定することで、様々な枠線を作ることができます。
では実際に書き方について見ていきましょう。

borderの種類

borderには様々な線の種類があります。1本線や2本線、その他にも点線で表示させることもできます。

• solid : 1本線で表示する
• double : 2本線で表示する
• dotted : 点線で表示する
• dashed : 破線で表示する
• groove : 立体的に窪んだ線で表示する
• ridge : 立体的に隆起した線で表示する
• inset : 内側全体が窪んだ線で表示する
• outset : 内側全体が隆起した線で表示する（insetと真逆）
• none : 非表示

borderの書き方

borderの基本的な書き方は下のように書いていきます。

セレクタ{
  border: 線の太さ 線の種類 線の色;
}

例えば1pxの線の太さ、種類は一本線、色は黒色の枠線を書く場合は、下のようになります。

セレクタ{
  border: 1px solid black;
}

このように書くことで枠線を書くことができます。

また、右だけ、下だけのように特定の場所にのみ指定する場合は「border-right」「border-bottom」と書くと指定することができます。

実際にブラウザでどう表示されるのか見てみましょう。
下の<p>タグを枠線で囲ってみます。

<!-- 1本線 -->
<p class="box1">1本線</p>

<!-- 2本線 -->
<p class="box2">2本線</p>

<!-- 点線-->
<p class="box3">点線</p>

<!-- 破線-->
<p class="box4">破線</p>

.box1{
  border: 2px solid red;
}

.box2{
  border: 2px double red;
}

.box3{
  border: 2px dotted red;
}

.box4{
  border: 2px dashed red;
}

ではブラウザで確認してみます。

まとめ

このようにborderを使うことで、様々な枠線を表示させることができます。
borderはよく使うプロパティの一つでもあるので、覚えておくと便利でしょう。
では本日は以上になります。