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 説明
色を指定します。
値を継承しない

コード

サンプルのコードです。
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

関連の記事

CSS 幅と高さを指定するサンプル(widthとheight)
CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)

△上に戻る