--- title: border-style slug: Web/CSS/border-style tags: - CSS - CSS プロパティ - CSS 背景と境界 - Reference - Web - border - border-style - 一括指定プロパティ translation_of: Web/CSS/border-style ---
{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/border-style.html")}}

構文

/* キーワード値 */
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: unset;

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

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

値

<line-style>
枠線のスタイルを表すキーワード。以下の値を使用できます。
none
要素
 hidden キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 none 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。
hidden
要素
 none キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は 0 になります。テーブルのセルで境界線が collasped 形式である場合は、 hidden 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。
dotted
要素
 連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。
dashed
要素
 短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
solid
要素
 1本の直線、実線を表示します。
double
要素
 2本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。
groove
要素
 凹んだように見える境界線を表示します。 ridge の逆です。
ridge
要素
 出っ張ったように見える境界線を表示します。 groove の逆です。
inset
要素
 要素が埋め込まれて見える境界線を表示します。 outset の逆です。 {{cssxref("border-collapse")}} が collapsed に設定されたテーブルのセルに適用すると、この値は groove のようにふるまいます。
outset
要素

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

形式文法

{{csssyntax}}

例

プロパティのすべての値を指定したテーブル

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

HTML

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

CSS

/* テーブルの外見を定義 */
table {
  border-width: 3px;
  background-color: #52E396;
}
tr, td {
  padding: 2px;
}

/* 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;}

結果

{{EmbedLiveSample('Table_with_all_property_values', 300, 200)}}

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}} {{Spec2('CSS3 Backgrounds')}} 変更なし。
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}} {{Spec2('CSS2.1')}} hidden キーワードを追加。
{{SpecName('CSS1', '#border-style', 'border-style')}} {{Spec2('CSS1')}} 初回定義

{{cssinfo}}

ブラウザーの互換性

{{Compat("css.properties.border-style")}}

関連情報