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

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

目次 borderとは
直線 (solid) / 連続した丸い点(ドット) (dotted) / 連続した短い線 (dashed)
二重線 (double) / へこんだ線 (groove) / 浮き出る線 (ridge)
内側にへこんだ線 (inset) / 内側が浮いた線 (outset)
borderを個別に指定(top/right/left/bottom)
borderを上書きで消す(none)

borderとは

書き方 border : 値1  値2  値3
値の区切り文字は半角スペースです。
値1
(ボーダーの幅)
数値 + 単位・・・指定した単位で設定します。
CSS pxとemとremの違い(長さの単位)
thin・・・細い線です。ブラウザに依存します。
medium・・・中くらいの線です。ブラウザに依存します。
thick・・・太い線です。ブラウザに依存します。
値2
(線の種類)
none・・・線を表示しません。
hidden・・・線を表示しません。
dotted・・・連続した丸い点(ドット)を表示します。
dashed・・・連続した短い線を表示します。
solid・・・直線です。よく使用します。solidは固体という意味です。
double・・・二重線です。
groove・・・へこんだように見える線を表示します。
ridge・・・浮き出るような線を表示します。
inset・・・内側がへこんだように見える線を表示します。
outset・・・内側が浮いたように見える線を表示します。
値3(色) 色を指定します。transparentを指定すると透明になります。
ボーターとは
ボーター(border)は、要素の周りにある線です。
パディングとマージンの間です。(図の赤字の部分)
初期値 medium,none,現在色
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/border

直線 (solid)

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

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

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

連続した短い線 (dashed)

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

二重線 (double)

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

へこんだ線 (groove)

<style>
  .p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 10px groove Linen; /* へこんだ線 */
  }
</style>
<p class="p1">border</p>

浮き出る線 (ridge)

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

内側にへこんだ線 (inset)

<style>
  .p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 10px inset Linen; /* 内側にへこんだ線 */
  }
</style>
<p class="p1">border</p>

内側が浮いた線 (outset)

<style>
  .p1 {
    width: 200px;
    background-color: #f0ffff;
    border: 10px outset Linen; /* 内側が浮いた線 */
  }
</style>
<p class="p1">border</p>

borderを個別に指定(top/right/left/bottom)

borderを個別に指定できます。

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

borderを上書きで消す(none)

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

8行目は、上書きでnoneを指定して線を消しています。

関連の記事

CSS border-collapse テーブルの枠線を重ねる/離す
CSS border-spacing テーブルの枠線の間隔を指定

△上に戻る