枠線のデザインを自由にアレンジしてみよう！

実線

二重線

溝のような線

インセット

アウトセット

画像や文字に枠線をつけると、素敵に見えますよね。

わざわざ複雑な表組みを使用しなくても、簡単に枠線をアレンジすることができるのです。

<DIV STYLE="border: thick solid moccasin;
position:absolute; top:85; left:220; width:150; height:50">
実線
</DIV>

<DIV STYLE="border: thick double ＃CCFF00;
position:absolute; top:140; left:260; width:150; height:50">
二重線
</DIV>

<DIV STYLE="border: thick groove ＃CCFF00;
position:absolute; top:200; left:280; width:150; height:50">
溝のような線
</DIV>

<DIV STYLE="border: thick inset ＃CCFF00;
position:absolute; top:260; left:300; width:150; height:50">
インセット
</DIV>

<DIV STYLE="border: thick outset ＃CCFF00;
position:absolute; top:310; left:350; width:150; height:50">
アウトセット
</DIV>

ここでは<DIV STYLE="border: 幅スタイル色">を使用しています。

幅の部分が取る値はthin、midium、thickでそれぞれ細い、中間、太いを表しています。

幅は10pxや1.5cm、12ptなどの単位でも指定することが可能です。

枠線のスタイルの部分の値は、solid→実線、double→二重線、groove→溝のような線、ridge→浮き出た線、inset→インセット、outset→アウトセットのようになっています。

枠線の色の部分の値は＃CCFF00のような16進数で指定するRGBカラーか、moccasinのように定義された色の名前になります。

またborder-top: 幅スタイル色、border-bottom: 幅スタイル色、border-left: 幅スタイル色、border-right: 幅スタイル色のようにすることで、四辺を別々に設定することもできます。

border-top、border-bottom、border-left、border-rightはそれぞれ枠線の上部、下部、左部、右部の指定を個別にする時に用います。