PR
用途 ボーダーの表示スタイルを決める
<border-style>{1,4} | inherit
対象となる要素 すべて
解説

テーブル(表組み)のセルや、ブロックレベル要素など、すべての要素のボックス周囲に設定したボーダーに色を設定するプロパティです。スタイルの決定にはボーダーの太さが0になるnoneと、太さを確保した状態でレンダリングに反映しない設定のhidden、点線のdotted、破線のdashed、実線のsolid、二重線のdouble、浮き彫りのgroove、彫り込みのridge、上部が影になるinset、下部が影になるoutsetの10種類を使います。
doubleやoutsetなどのスタイルはボーダーに幅が足りないと表示されません。ブロックレベル要素などボックスのスタイルにこれらを適用する場合は'border-width'を、テーブル(表組み)のスタイルにこれらを適用する場合は'border-spacing'を広めに設定しましょう。
'border-style'に1パターンのみ指定した場合は4辺に同一の色が反映します。また、4辺に異なるスタイルを指定する場合は

border-style:hidden dotted solid double;

のように指定します。この場合、上辺、右辺、下辺、左辺の順にスタイルが反映します。

border-style:hidden dotted ;

とした場合は先頭から上辺、下辺となります。
なお、'border-top-style'、 'border-right-style'、 'border-bottom-style'、'border-left-style'のいずれかを使って目的の1辺のみに色を反映させることも可能です。

スタイルの例

form#form1 input.input1 {
border-style:solid ;
border-color: #4991F1;
font-size: 1.2em;
padding: 0.4em;
font-family: "MS Pゴシック","ヒラギノ角ゴ Pro W3";
}

form#form1 input.input2 {
border-style:dotted;
border-color: #7EAAE6;
font-size: 1.2em;
padding: 0.4em;
font-family: "MS Pゴシック","ヒラギノ角ゴ Pro W3";
}

form#form1 input.input3 {
border-style:dashed ;
border-color: #7EAAE6;
}
form#form1 input.input4 {
border-style:double ;
border-color: #4F89D7;
border-width:4px;
}

form#form1 input.input5 {
border-style:groove ;
border-color: #4BB1E4;
border-width:4px;
}

form#form1 input.input6 {
border-style:ridge ;
border-color: #5FD7FF;
border-width:4px;
}

form#form1 input.input7 {
border-style: inset;
border-color:#4DBCFF;
border-width:4px;
}

form#form1 input.input8 {
border-style:outset ;
border-color: #0097CB;
border-width:4px;
}

サンプルページの表示(別ウィンドウ)

値の表記について

  1. CSS2のプロパティは解説の中で<color>など単位の表記と混同することを避ける目的でSingle Quotation(')で囲っています。
  2. Box bracket [ ] は、各プロパティに指定可能な値をグループ化しています。
  3. Bar | は各プロパティに指定可能な値を区切っています。
  4. 2重のBar || は各プロパティに指定可能な値のグループ、または個別の特性を持つプロパティを区切っています。
  5. inheritは親要素のプロパティが継承できる種類であることを意味します。
  6. <length>や<color>、<percentage>などAngle brackets < > で囲ったものは、それぞれ単位を採用できる値です。
  7. <margin-width>{1,4}のように単位がBraces { }で囲った整数を伴う場合は、その数だけ単位の指定が可能です。例の場合は単位を上、下、左、右のように1つ以上、4つ以下で単位を複数指定できる、という意味になります。
  8. <length>? のように単位が疑問符を伴う場合は、単位を0または1つだけ指定できる、という意味になります。
  9. [<uri> ,]* のように単位がAsteriskを伴う場合は、単位を0以上指定できます。つまり指定しなくても良い、または必要あれば可能な限り指定できるという意味です。
  10. [ <identifier> <integer>? ]+ のように単位(のグループ)がPlus + を伴う場合は、単位を必要あれば可能な限り指定できるという意味です。例の場合は識別子と整数(1つだけ)のセットを必要なだけ指定できる、となります。