CSS border ボーダーの表示方法を指定する

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

仕様	borderプロパティの仕様
サンプル	borderのサンプル
	borderを個別に指定

borderプロパティの仕様

border : 値1 値2 値3

borderプロパティは、ボーダーの表示方法を指定します。
引数は3つあり、ボーダーの幅、線の種類、色を指定します。
それぞれの値の間に半角スペースを入れます。

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

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

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

ボーター(border)は、要素の周りにある線です。
パディングとマージンの間です。(図の赤字の部分)

以下はMDNのborderプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/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:#F0FFFF;}
</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を個別に指定できます。

指定方法	意味
border-top 例：border-top:10px;	borderを上に指定する
border-right 例：border-right:10px;	borderを右に指定する
border-bottom 例：border-bottom:10px;	borderを下に指定する
border-left 例：border-left:10px;	borderを左に指定する