パソコンQ&A

border CSS辞典

CSSリファレンス 目的順
CSSリファレンス ABC順

borderボーダーのスタイル・太さ・色を四方まとめて指定する

説明

border:solid double dashed dotted 1px 2px 3px 4px #f00 #0f0 #00f #f0f;

のように四方をそれぞれ指定することはできません。
IE以外のブラウザでは、全てが無視されます。
IEでは種類別の最後の指定のみ有効となります。
(この場合border:dotted 4px #f0f;となります。)

対応ブラウザ

  • IE4
  • IE5
  • IE6
  • IE7
  • IEMac
  • Netscape6
  • Netscape7
  • Firefox1
  • Firefox2
  • Opera6
  • Opera7
  • Opera8
  • Opera9
  • Safari1
  • Safari2

仕様

CSS Level1

内容
スタイル
noneボーダーは表示されず、太さも0です
表のセルなどボーダーが重なり合う場合は他のボーダー指定が優先となる[初期値]
hiddenボーダーは表示されず、太さも0です
表のセルなどボーダーが重なり合う場合はこの値が優先となる
solid1本線で表示する
double2本線で表示する
groove立体的に窪んだ線で表示する
ridge立体的に隆起した線で表示する
inset上と左が暗く、下と右が明るいボーダーが表示され、囲まれた領域が立体的に窪んだように表示される
outset上と左が明るく、下と右が暗いボーダーが表示され、囲まれた領域全体が立体的に隆起したように表示される
dashed破線で表示する
dotted点線で表示する
太さ
数値数値にpxなどの単位をつけて指定する
キーワードで指定thin(細い)、medium(普通)、thick(太い)のいずれか
実際に表示される太さはブラウザにより異なる
色コード#000000、#000、blackなど色を指定する
transparentボーダーの色を透明にする

ブラウザバグなど

ボックスの幅や高さにパディングやボーダーのサイズを含める
サイズを指定した要素に二重線のボーダーをつけると、ボーダーの隙間に背景が表示されない
Safariで背景画像がはみ出る
インライン要素にborderやpaddingが効かない
空セルにボーダーの指定をすると一回り大きな位置にボーダーが付く
空セルでborder-collapse:collapse;とborder-collapse:separate;とでボーダーの表示が違う
インライン要素にwidthやheightを指定すると表示が変わる

ボックス△上に戻る

borderボーダーのスタイル・太さ・色を四方まとめて指定する
border-bottom下ボーダーのスタイル・太さ・色を指定する
border-bottom-color下ボーダーの色を指定する
border-bottom-style下ボーダーのスタイルを指定する
border-bottom-width下ボーダーの太さを指定する
border-colorボーダーの色を指定する
border-left左ボーダーのスタイル・太さ・色を指定する
border-left-color左ボーダーの色を指定する
border-left-style左ボーダーのスタイルを指定する
border-left-width左ボーダーの太さを指定する
border-right右ボーダーのスタイル・太さ・色を指定する
border-right-color右ボーダーの色を指定する
border-right-style右ボーダーのスタイルを指定する
border-right-width右ボーダーの太さを指定する
border-styleボーダーのスタイルを指定する
border-top上ボーダーのスタイル・太さ・色を指定する
border-top-color上ボーダーの色を指定する
border-top-style上ボーダーのスタイルを指定する
border-top-width上ボーダーの太さを指定する
border-widthボーダーの太さを指定する
marginマージンに関する指定をまとめて行う
margin-bottom下マージンを指定する
margin-left左マージンを指定する
margin-right右マージンを指定する
margin-top上マージンを指定する
paddingパディングに関する指定をまとめて行う
padding-bottom下パディングを指定する
padding-left左パディングを指定する
padding-right右パディングを指定する
padding-top上パディングを指定する


主要ブラウザに非対応

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net