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

関連の記事

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

△上に戻る