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

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

ボーダーの表示方法を指定するサンプルです。

連続した丸い点(ドット) (dotted)

<style>
  #p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 1px dotted black; /* 連続した丸い点(ドット) */
  }
</style>
<p id="p1">border</p>

連続した短い線 (dashed)

<style>
  #p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 1px dashed black; /* 連続した短い線 */
  }
</style>
<p id="p1">border</p>

直線 (solid)

<style>
  #p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 1px solid black; /* 直線 */
  }
</style>
<p id="p1">border</p>

二重線 (double)

<style>
  #p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 10px double black; /* 二重線 */
  }
</style>
<p id="p1">border</p>

へこんだように見える線 (groove)

<style>
  #p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 10px groove Linen; /* へこんだように見える線 */
  }
</style>
<p id="p1">border</p>

浮き出るような線 (ridge)

<style>
  #p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 10px ridge Linen; /* 浮き出るような線 */
  }
</style>
<p id="p1">border</p>

内側がへこんだように見える線 (inset)

<style>
  #p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 10px inset Linen; /* 内側がへこんだように見える線 */
  }
</style>
<p id="p1">border</p>

内側が浮いたように見える線 (outset)

<style>
  #p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 10px outset Linen; /* へこんだように見える線 */
  }
</style>
<p id="p1">border</p>

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を左に指定する