いろいろなボーダー

今回はボーダーの種類や書き方についてです。
たかが枠線と侮るなかれ。上手く使えばステキなアクセントになりますよ。

プロパティには次のようなものがあります

border-color・・・枠線の色
border-style・・・枠線の見た目
border-width・・・枠線の太さ

これらは次のようにして上下左右を個別に設定することができます。

border-top-???・・・上の枠線の？？？
border-bottom-???・・・下の枠線の？？？
border-left-???・・・左の枠線の？？？
border-right-???・・・右の枠線の？？？

めんどくさかったら、値を複数書くことで、上下左右の設定もできます。例：border-widthの場合

border-width:10px;/*上下左右*/
border-width:10px 20px;/*上下、左右*/
border-width:10px 20px 30px;/*上、左右、下*/
border-width:10px 20px 30px 40px;/*上、右、下、左*/

---

border-styleの値は次の9種類の中から選ぶことができます。

none   :枠線は表示されません
dotted :点線で表示
dashed :破線で表示
solid  :実践で表示
double :二重線で表示
groove :彫りこんだように表示
ridge  :盛り上がったように表示（grooveの逆）
inset  :全体がへこんだように表示
outset :全体が盛り上がったように表示（insetの逆）

全てborder-widthは5px、border-colorは#CC6600にしてあります。

border-style:none;

border-style:dotted;

border-style:dashed;

border-style:solid;

border-style:double;

border-style:groove;

border-style:ridge;

border-style:inset;

border-style:outset;

見た目や太さを上下左右で使い分けることで、様々な表現が可能になります。 いろいろ試してみてください。
それらのサンプルは応用編で紹介することにしましょう。

---