border

by 3 contributors:

概要

border プロパティは、スタイルシート内の 1 ヶ所で境界線各プロパティ値を設定する簡略化プロパティです。border は、border-widthborder-styleborder-color の内、1 つまたは複数の値を設定するために使用することができます。

簡略化プロパティでは、値が指定されなかったプロパティに初期値がセットされます。また、border-image はこの簡略化プロパティからセットできませんが、初期値である none にリセットされる点に注意してください。このため border は、カスケード上、先にセットされたすべてのボーダーの設定をリセットするのに使えます。W3C は今後の level の仕様でもこの特性を保持するつもりなので、このメソッドをボーダー設定のリセットに使うことが推奨されます。

注記: border-widthborder-styleborder-color プロパティ、さらに marginpadding といった簡略化プロパティでは、4 つまでの値を受けつけ、ボーダーごとに異なった幅、スタイル、色をセットできます。しかしながら、border プロパティが受けつけるのはプロパティごとに 1 つの値だけで、四辺すべてのボーダーに反映されます。

  • 初期値 詳細については、各プロパティのページを参照してください。
  • 適用対象 全ての要素
  • 継承 しない
  • 相対値の基準 N/A
  • メディア visual
  • 計算値 各プロパティのページを参照してください。

構文

border:  [ <border-width> || <border-style> || <border-color> ] | inherit

border-width
オプション。存在しない場合デフォルト値 medium が使用されます。border-width を参照してください。
border-style
必須。存在しない場合デフォルト値 none が使用されます。border-style を参照してください。
border-color
オプション。存在しない場合はデフォルト値になります。境界線のデフォルト値は要素の color プロパティ(前景色)になります。border-color を参照してください。

実際の表示を確認

element { border: dashed }          /* 破線で中程度の太さの境界線、色はテキストと同じ。 */
element { border: dotted 1.5em }    /* 破線で 1.5em の太さの境界線、色はテキストと同じ。 */
element { border: solid red }       /* 赤色実線で中程度の太さの境界線。 */
element { border: solid blue 10px } /* 青色実線で 10px の太さの境界線。 */

注意

border-widthborder-styleborder-color のプロパティは 4 個の値を取ることができますが、border プロパティはそれぞれプロパティの 1 個分の値しか受けつけません。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補 transparent は有効な <color>であるため、規則上はサポートが外されますが、実質的な影響はありません。borderborder-image を初期値(none)に戻します。borderborder-image にこれ以外の値はセットできません。
CSS Level 2 (Revision 1) 勧告 inherit キーワードを受けつけます。また、transparent を有効な色として受けつけます
CSS Level 1 勧告  

ブラウザの互換性

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本機能 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本機能 1.0 (1.9.2) ? ? ? 1.0

参照

ドキュメントのタグと貢献者

Contributors to this page: ethertank, sosleepy, Yuichiro
最終更新者: ethertank,
サイドバーを隠す