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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

試してみましょう

border-style: none;

border-style: dotted;

border-style: inset;

border-style: dashed solid;

border-style: dashed double none;

border-style: dashed groove none dotted;

<section id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eee;
  color: #000;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: #fff;
}

構成要素のプロパティ

このプロパティは以下の 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-collapse が collapsed に設定されたテーブルのセルに適用すると、この値は ridge のようにふるまいます。

outset

要素が出っ張って見える境界線を表示します。 inset の逆です。 border-collapse を collapsed に設定したテーブルセルに適用すると、この値は 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

ブラウザーの互換性

関連情報