Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

border-style

境界線のスタイルに関する項目をまとめて指定できます。

指定する値の個数で上下左右をそれぞれ異なるスタイルにすることができます。値の区切りは半角スペースを使用します。

値が1つの場合、上下左右の境界線に同じ値が適用されます。
値が2つの場合、1つ目は上下の、2つ目は左右の境界線に値が適用されます。
値が3つの場合、1つ目は上、2つ目は左右、3つ目は下の境界線に適用されます。
値が4つの場合、それぞれ上、右、下、左（上から時計回り）の境界線に適用されます。

サンプルコード

/* 『上下左右』を指定しています。 */
div.test { border-style: dashed;}

/* 『上下』『左右』を指定しています。 */
div.test1 { border-style: dashed solid;}

/* 『上』『左右』『下』を指定しています。 */
div.test2 { border-style: dashed solid dotted;}

/* 『上』『下』『左』『右』を指定しています。 */
div.test3 { border-style: dashed solid dotted double;}

指定可能な値一覧

値	概要
none	境界線描画をしません。太さも0となります。これが初期値です。
solid	1本の線で境界線が描画されます。
dashed	隙間が大きめの破線で境界線が描画されます。
dotted	隙間が小さめの破線で境界線が描画されます。
double	2本の線で境界線が描画されます。
groove	彫り込まれているような境界線で描画されます。『ridge』と逆の描画です。
ridge	彫り上がっているような境界線で描画されます。『groove』と逆の描画です。
inset	埋め込みされているような境界線で描画されます。『outset』と逆の描画です。
outset	浮き上がっているような境界線で描画されます。『inset』と逆の描画です。

ブラウザでの表示結果

<div style="border-style: none; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>S

<div style="border-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-style: dashed; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-style: dotted; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-style: double; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-style: groove; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-style: ridge; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-style: inset; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-style: outset; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

境界線のスタイルに関する項目をまとめて指定できます。

『border-style』プロパティに何も指定していない場合は初期値の『none』となります。『none』だと太さが0となり境界線が描画されません。何かしらの境界線を描画したい場合は『border-style』プロパティの値を『none』以外の値にする必要があります。ご注意ください。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル