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

nas

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

目次

borderのサンプル

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>
<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>

以下は、実行結果です。

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

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

関連の記事

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

△上に戻る