CSS ボーダーの表示方法を指定するサンプル(border) |

CSSのボーダーの表示方法を指定するサンプルです。
このサンプルでは、borderプロパティを使用します。

border プロパティ

border : 値1 値2 値3

値1 : border-width (線の幅)
値1	説明
数値 + 単位	指定した単位で設定します。
thin	細い線です。ブラウザに依存します。
medium	中くらいの線です。ブラウザに依存します。
thick	太い線です。ブラウザに依存します。

値2 : border-style (線の種類)
値2	説明
none	線を表示しません。
hidden	線を表示しません。
dotted	連続した丸い点(ドット)を表示します
dashed	連続した短い線を表示します。
solid	直線です。
double	二重線です。
groove	へこんだように見える線を表示します。
ridge	浮き出るような線を表示します。
inset	内側がへこんだように見える線を表示します。
outset	内側が浮いたように見える線を表示します。

値3 : border-color (線の色)
値3	説明
色	色を指定します。
値を継承しない

ボーダーの幅、線の種類、色を指定します。
それぞれの値の間に半角スペースを入れます。
以下はMDNのborderプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/border

コード

サンプルのコードです。
2-11行目は、borderプロパティを指定しています。

<style>
#p1{border:1px none black;}
#p2{border:1px hidden black;}
#p3{border:1px dotted black;}
#p4{border:1px dashed black;}
#p5{border:1px solid black;}
#p6{border:3px double black;}
#p7{border:3px groove Linen;}
#p8{border:3px ridge;}
#p9{border:3px inset;}
#p10{border:3px outset Linen;}
#d1{width:200px;background-color:MistyRose;}
</style>
<body >
<div id="d1">
<p id="p1">1px none black</p>
<p id="p2">1px hidden black</p>
<p id="p3">1px dotted black</p>
<p id="p4">1px dashed black</p>
<p id="p5">1px solid black</p>
<p id="p6">3px double black</p>
<p id="p7">3px groove Linen</p>
<p id="p8">3px ridge Linen</p>
<p id="p9">3px inset Linen</p>
<p id="p10">3px outset Linen</p>
</div>
</body>

サンプル

上記コードのサンプルです。

1px none black

1px hidden black

1px dotted black

1px dashed black

1px solid black

3px double black

3px groove Linen

3px ridge Linen

3px inset Linen

3px outset Linen