CSS border-style 属性

定義と使用方法

border-style 属性は、要素のすべての境界線のスタイルを設定するか、各々の境界線に個別に境界線スタイルを設定するために使用されます。

この値が none でない場合にのみ境界線が表示されます。

例 1

border-style:dotted solid double dashed;
  • 上境界線は点状です
  • 右境界線は実線です
  • 下境界線は二重線です
  • 左境界線は破線です

例 2

border-style:dotted solid double;
  • 上境界線は点状です
  • 右境界線と左境界線は実線です
  • 下境界線は二重線です

例 3

border-style:dotted solid;
  • 上境界線と下境界線は点状です
  • 右境界線と左境界線は実線です

例 4

border-style:dotted;
  • すべての 4 本の境界線は点状です

参照してください：

CSS タイプ：CSS 边框

HTML DOM リファレンスマニュアル：borderStyle 属性

例

4つのボーダースタイルを設定します：

p
  {
  border-style:solid;
  }

実際に試してみる

CSS 文法

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

属性値

値 説明
none ボーダーを無効にします。
hidden "none" と同じです。ただし、テーブルに適用される場合を除きます。テーブルの場合、hidden がボーダー干渉を解決するために使用されます。
dotted 点状ボーダースタイルを定義します。ほとんどのブラウザでは実線として表示されます。
dashed 点線を定義します。ほとんどのブラウザでは実線として表示されます。
solid 実線を定義します。
double 点線を定義します。点線の幅は border-width の値に等しいです。
groove 3D 凹槽ボーダースタイルを定義します。その効果は border-color の値によって決定されます。
ridge 3D 嵐線ボーダースタイルを定義します。その効果は border-color の値によって決定されます。
inset 3D inset ボーダースタイルを定義します。その効果は border-color の値によって決定されます。
outset 3D outset ボーダースタイルを定義します。その効果は border-color の値によって決定されます。
inherit 親要素からボーダースタイルを継承するべきです。

説明

最も予測不可能なボーダースタイルは double です。それは、2本の線の幅とその間のスペースが border-width の値に等しいと定義されています。しかし、CSS 规範には、その1本の線がもう1本の線よりも太いかどうか、または2本の線が同じ幅かどうか、また線の間のスペースが線の幅よりも太いかどうかは記載されていません。これらすべてはユーザーエージェントによって決定され、クリエイターはその決定に影響を与えることができません。

技術的詳細

デフォルト値： not specified
継承性： no
バージョン： CSS1
JavaScript 文法： object.style.borderStyle="dotted double"

さらに多くの例

四辺のボーダースタイルの設定
この例では、四辺のボーダースタイルの設定方法を示します。
各辺に異なるボーダースタイルの設定
この例では、要素の各辺に異なるボーダースタイルを設定する方法を示します。

ブラウザのサポート

このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5