ボーダースタイルの設定
アセンブラの魔女 ⧫ CSS ⧫ ボックス・モデル ⧫ ボーダープロパティ ⧫ ボーダースタイルの設定

　ボーダースタイルプロパティ（border-top-style,border-right-style,border-bottom-style,border-left-style,border-style）、ボックスのボーダーのラインスタイルを指定します。

　ボーダーラインはボックスの背景の上に描画されます。

　ボーダースタイルのプロパティでは、ボーダーのラインスタイル指定のために<border-style>値を使います。

noneボーダーなし。ボーダー幅の計算値はゼロとなります
hiddenテーブル要素の折り畳みボーダーモデルに対応する点を除いてnoneと同じ
dotted点線
dashed破線
solid1本の実線
double2本の実線。2本の線の幅とその間のスペースはborder-widthの値に等しい
grooveボーダーラインを、キャンバスに掘られたかのような効果で表示
ridgegrooveとは反対の効果。ボーダーラインがキャンバスから浮き出るように見える効果で表示
insetボーダーラインを、キャンバスに埋め込まれているかのような効果で表示
outsetinsetとは反対の効果。ボーダーラインがキャンバスから出てきたかのように見える効果で表示

　ボーダースタイルの初期値はnone（ボーダーなし）なので、ボーダースタイルが設定されていない限り、そのボックスにボーダーは表示されません。

　ボーダーラインの色には、ボーダーカラーの設定が反映されますが、ボーダースタイルにgroove, ridge, inset, outsetを指定した場合、ボーダーラインの色はUA独自のアルゴリズムで描画されることもあります。 例えば、border-color値がsilverの場合、UAは白から濃い灰色の色のグラデーションを使用して斜めの境界を示すこともあります。

　これらのプロパティは、ボーダー領域のスタイルを指定します。

値<border-style>| inherit
初期値none
適用可能な要素すべての要素
継承のデフォルト動作継承しない
パーセンテージ値指定不可
メディアグループvisual
計算値値で指定された通り

　border-styleはborder-top-style, border-right-style, border-bottom-style, border-left-styleのためのショートハンドプロパティです。

値[<border-style> ]{1,4} | inherit
初期値none
適用可能な要素すべての要素
継承のデフォルト動作継承しない
パーセンテージ値指定不可
メディアグループvisual
計算値値で指定された通り

　1～4個の値を指定できますが、その意味は値の数によって異なります。

　以下は1～4個の値がどのボーダー領域に適応されるかを示す表です。値1はリストの先頭の値を意味します。

値の数値1値2値3値4
1TOP
RIGHT
BOTTOM
LEFT		---
2TOP
RIGHT
BOTTOM		RIGHT
LEFT		--
3TOPRIGHT
LEFT		BOTTOM-
4TOPRIGHTBOTTOMLEFT 

h1 { 
  color:black;
  background: white; 
  margin: 10px;
  border-width: 10px;
  border-color: silver;
  padding: 0px;
} 
h1.dotted { 
  border-style: dotted;
} 
h1.dashed { 
  border-style: dashed;
} 
h1.dashed { 
  border-style: dashed;
} 
h1.solid { 
  border-style: solid;
} 
h1.double { 
  border-style: double;
} 
h1.groove { 
  border-style: groove;
} 
h1.ridge { 
  border-style: ridge;
} 
h1.inset { 
  border-style: inset;
} 
h1.outset { 
  border-style: outset;
}

　上記の例で、test1クラスのH1要素はすべてのボーダー領域をthinに設定します。test2クラスのH1要素では、TOP=thin, RIGHT=LEFT=medium, BOTTOM=thickに設定します。

　これを以下のHTMLで使うと、



　上記のスタイルシートを、以下のHTMLで使うと、


<h1 class="dotted">dotted</H1>
<h1 class="dashed">dashed</H1>
<h1 class="solid">solid</H1>
<h1 class="double">double</H1>
<h1 class="groove">groove</H1>
<h1 class="ridge">ridge</H1>
<h1 class="inset">inset</H1>
<h1 class="outset">outset</H1>




　次のように表示されます。






dotted


dashed


solid


double


groove


ridge


inset


outset
























▼ Property