border-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

border-style一括指定CSS プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。

試してみましょう

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* キーワード値 */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* 上下 | 左右 */
border-style: dotted solid;

/* 上 | 左右 | 下 */
border-style: hidden double dashed;

/* 上 | 右 | 下 | 左 */
border-style: none solid dotted dashed;

/* グローバル値 */
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;

border-style プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。

  • 値が 1 つ指定された場合、全 4 辺に同じスタイルが適用される。
  • 値が 2 つ指定された場合、1 つ目のスタイルは上下、2 つ目は左右の辺に適用される。
  • 値が 3 つ指定された場合、1 つ目のスタイルは、2 つ目は左右、3 つ目はの辺に適用される。
  • 値が 4 つ指定された場合、スタイルはそれぞれの順(時計回り)に適用される。

それぞれの値は以下の一覧にあるキーワードです。

<line-style>

境界のスタイルを記述します。以下の値を使用することができます。

none

hidden キーワードと同様に、境界線を表示しません。 background-image を設定している場合を除き、プロパティで別に指定していても border-width の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 none 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。

hidden

none キーワードと同様に、境界線を表示しません。 background-image を設定している場合を除き、プロパティで別に指定していても border-width の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 hidden 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。

dotted

連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の border-width の計算値の半分です。

dashed

短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。

solid

1 本の直線、実線を表示します。

double

2 本の直線を表示し、幅の合計は border-width で定義したピクセル数になります。

groove

凹んだように見える境界線を表示します。 ridge の逆です。

ridge

出っ張ったように見える境界線を表示します。 groove の逆です。

inset

要素が埋め込まれて見える境界線を表示します。 outset の逆です。 border-collapsecollapsed に設定されたテーブルのセルに適用すると、この値は ridge のようにふるまいます。

outset

要素が出っ張って見える境界線を表示します。 inset の逆です。 border-collapsecollapsed に設定したテーブルセルに適用すると、この値は groove のようにふるまいます。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類離散値

形式文法

border-style = 
<line-style>{1,4}

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

プロパティのすべての値

プロパティのすべての値のサンプルです。

HTML

html
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>

CSS

css
pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/* border-style の例示用クラス */
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# border-style

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-style
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報