Border - 枠線
- border〔ボーダープロパティの一括指定〕
- border-*〔各ボーダーのプロパティ一括指定〕
- border-color ※CSS3変更〔ボーダーの色を指定〕
- border-*-color〔各ボーダーの色を個別に指定〕
- border-style〔ボーダーの種類を指定〕
- border-*-style〔各ボーダーのスタイルを個別に指定〕
- border-width〔ボーダーの幅を指定〕
- border-*-width〔各ボーダーの幅を個別に指定〕
border
ボーダープロパティの一括指定
unknown
borderプロパティは、個々のボーダープロパティを一括指定できるショートハンドです。
プロパティの値は順不同で半角スペース区切りで指定します。
各値は省略可能となっており、省略した値は、そのプロパティのデフォルト値が適用されます。
- デフォルト値:現在色
- 適用:全要素
- 継承:しない
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ○/IE9: ○
設置サンプル
<style type="text/css"> div.box1 { margin:1em 0; padding:1px; border:1px solid #ccc; /* 一括指定 */ } div.box1_pad { margin:1px; padding:5px; border:1px solid #ddd; /* 一括指定 */ background-color:#f2f2f2; } </style> <div class="box1"> <div class="box1_pad">上右下左ボーダー</div> </div>
border-*
各ボーダーのプロパティ一括指定
unknown
border-right: <border-width> || <border-style> || <color>
border-bottom: <border-width> || <border-style> || <color>
border-left: <border-width> || <border-style> || <color>
border-*プロパティは、上下左右ボーダーのプロパティをそれぞれ一括指定します。
borderプロパティの値は、半角スペース区切りで指定します(順不同)。
値を省略した場合は、省略した値のプロパティのデフォルト値が適用されます。
- デフォルト値:現在色
- 適用:全要素
- 継承:しない
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ○/IE9: ○
設置サンプル
<p>▼border-topの使用例</p> <style type='text/css'> ul#nabtb, ul#nabtb * { margin:0; padding:0; background-color:#fff; } ul#nabtb { margin:1em 0; padding:0; } ul#nabtb li { display:inline; margin:0; padding:0; } ul#nabtb div { margin:0 0 0 -5px; padding:0; display:inline; } ul#nabtb a { border-top:5px solid silver; /* 上ボーダーの一括指定 */ margin:0; padding:5px 10px; text-decoration:none; color:gray; font-weight:bold; } ul#nabtb a:hover { border-top:5px solid orange; /* 上ボーダーの一括指定 */ text-decoration:none; color:darkorange; font-weight:bold; } </style> <ul id="nabtb"> <li><div><a href="#">PHP</a></div></li> <li><div><a href="#">JavaScript</a></div></li> <li><div><a href="#">HTML</a></div></li> <li><div><a href="#">CSS</a></div></li> <li><div><a href="#">MySQL</a></div></li> </ul> <hr /> <p>▼border-leftの使用例</p> <style type="text/css"> div.bleft { margin:10px 0; padding:2px 10px; border-left:8px solid #ff6699; /* 左ボーダーの一括指定 */ color:#ff6699; background-color:#f9f7ed; font:bold 15px verdana,sans-serif; } </style> <div class="bleft">border-left</div> <hr /> <p>▼border-rightの使用例</p> <style type="text/css"> blockquote.inyo { width:80%; margin:10px 0 10px 20px; padding:20px 10px 10px 20px; border-right:10px #ccc ridge; /* 右ボーダーの一括指定 */ background:#f7f7f7 url(/content/img/skin/dquot.gif) no-repeat 10px 5px; } </style> <blockquote class="inyo"> <p> Cascading Style Sheets(カスケーディング・スタイル・シート、CSS)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、W3Cによる勧告の一つ。カスケード・スタイル・シートとも呼ばれる。スタイルシートの一種。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 <cite><a href="http://ja.wikipedia.org/wiki/Cascading_Style_Sheets">(出典: フリー百科事典『ウィキペディア(Wikipedia)』)</a></cite> </p> </blockquote> <p>▼border-bottomの使用例</p> <style type="text/css"> abbr.bbt, acronym.bbt { cursor:help; text-decoration:none; background:#f9f7ed; color:#ff6699; border-bottom:1px dotted #ff6699; /* 下ボーダーの一括指定 */ } </style> <p> abbr要素は、<abbr class="bbt" title="World Wide Web Consoritum">W3C</abbr>(ダブリュースリーシー)や<abbr class="bbt" title="HyperText Markup Language">HTML</abbr>(エイチティーエムエル)など、1つの単語として発音されない略語に使用します。 ※IEではabbr要素はサポートされていません。 </p> <p> acronym要素は、<acronym class="bbt" title="North Atlantic Treaty Organisation">NATO</acronym>(ナトー)のように、1つの単語として発音される略語に使用します。 </p> <hr /> <p>▼border-right/border-bottomの使用例</p> <style type="text/css"> img.waku { padding:5px; border-right:1px solid #ccc; border-bottom:1px solid #bebebe; } </style> <img src="/content/img/dog_black.png" alt="dog" class="waku" /> <img src="/content/img/dog_white.gif" alt="dog" class="waku" />
▼border-topの使用例
▼border-leftの使用例
▼border-rightの使用例
Cascading Style Sheets(カスケーディング・スタイル・シート、CSS)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、W3Cによる勧告の一つ。カスケード・スタイル・シートとも呼ばれる。スタイルシートの一種。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 (出典: フリー百科事典『ウィキペディア(Wikipedia)』)
▼border-bottomの使用例
abbr要素は、W3C(ダブリュースリーシー)やHTML(エイチティーエムエル)など、1つの単語として発音されない略語に使用します。 ※IEではabbr要素はサポートされていません。
acronym要素は、NATO(ナトー)のように、1つの単語として発音される略語に使用します。
▼border-right/border-bottomの使用例


border-color ※CSS3変更
ボーダーの色を指定
unknown
border-colorプロパティは、ボーターの色を指定します。
- デフォルト値:現在色
- 適用:全要素
- 継承:しない
値
値 | 説明 |
---|---|
transparent | 透明 |
<color> |
/* 色名 */ h1 { border-color: yellow; } /* 数値で指定 */ h1 { border-color: #ff0; } h1 { border-color: #ffff00; } h1 { border-color: rgb(255,255,0); } h1 { border-color: rgb(100%,100%,0%); } |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ○/IE9: ○
設置サンプル
例:ボーダー色でロールオーバー効果
上左、下右ボーダーにそれぞれ濃淡カラーを指定し、通常時とマウスが乗った時で色を入れ替えることでロールオーバー効果を出すことができます。
<style type="text/css"> div.rover { margin:1em; } div.rover a { width:10em; margin:3px 0; padding:5px; border-width:1px; border-style:solid; border-color:#ccc #666 #666 #ccc; color:#666; background-color:#eee; text-decoration:none; } div.rover a:hover { padding:6px 4px 4px 6px; border-color:#666 #ccc #ccc #666; color:#666; background-color:#eee; text-decoration:none; } </style> <div class="rover"> <a href="#">ボタン1</a> <a href="#">ボタン2</a> </div>
例:値を2、3、4つ指定した場合
<style type="text/css"> #border_color_val4 { margin:0 0 10px 0; padding:5px; border-width:10px; border-style:solid; border-color:pink hotpink orange darkorange; } #border_color_val4_2 { margin:0 0 10px 0; padding:5px; border-width:10px; border-style:solid; border-color:pink hotpink orange; } #border_color_val4_3 { margin:0 0 10px 0; padding:5px; border-width:10px; border-style:solid; border-color:pink hotpink; } </style> <div id="border_color_val4">border-color:pink hotpink orange darkorange; 上 右 下 左</div> <div id="border_color_val4_2">border-color:pink hotpink orange; 上 左右 下</div> <div id="border_color_val4_3">border-color:pink hotpink; 上下 左右</div>
border-*-color
各ボーダーの色を個別に指定
unknown
border-*-colorプロパティは、各ボーダーの色を個別に指定します。
例えば、ボーダーの色を上下左右でそれそれに違う色にしたい場合に有用です。
- デフォルト値:現在色
- 適用:全要素
- 継承:しない
設置サンプル
<style type="text/css"> div.bordercolor4 { padding:10px 15px; border:6px solid #ccc; border-bottom-color:#eee; border-right-color:#ddd; } </style> <div class="bordercolor4"> border:6px solid #ccc; border-bottom-color:#eee; border-right-color:#ddd; </div>
border-style
ボーダーの種類を指定
unknown
border-styleプロパティは、ボーダーのスタイルを指定します。
- デフォルト値:none
- 適用:全要素
- 継承:しない
値
値 | 説明 |
---|---|
none | ボーダーなし。 |
hidden | ボーダーを非表示にする。 |
solid | 実線。 |
dotted | 点線。 |
dashed | 点線(幅が広い)。 |
double | 二重線。 ※二重線にする場合は、border-widthプロパティを3px以上にしてください。それ以下だと二重線になりません。 |
groove | 凹 |
ridge | 凸 |
inset | ボーダーの内側が凹 |
outset | ボーダーの内側が凸 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ○/IE9: ○
設置サンプル
例:額縁風
<style type="text/css"> div.gaku { width:90px; border-width:5px; border-color:#ccc; border-style:ridge; } </style> <div class="gaku"><img src="/content/img/dog_white.gif" width="90" height="90" alt="写真" /></div>

例:値を2、3、4つ指定した場合
<style type="text/css"> #border_style_val4 { margin:0 0 10px 0; padding:5px; border-width:3px; border-color:hotpink; border-style:dashed solid dotted double; } #border_style_val4_2 { margin:0 0 10px 0; padding:5px; border-width:3px; border-color:hotpink; border-style:dashed solid dotted; } #border_style_val4_3 { margin:0 0 10px 0; padding:5px; border-width:3px; border-color:hotpink; border-style:dashed solid; } </style> <div id="border_style_val4">border-style:dashed solid dotted double; 上 右 下 左</div> <div id="border_style_val4_2">border-style:dashed solid dotted; 上 左右 下</div> <div id="border_style_val4_3">border-style:dashed solid; 上下 左右</div>
border-*-style
各ボーダーのスタイルを個別に指定
unknown
border-right-style: <border-style>
border-bottom-style: <border-style>
border-left-style: <border-style>
border-*-styleプロパティは、各ボーダーのスタイルを個別に指定します。
例えば、ボーダーのスタイルを上下左右でそれそれに違うスタイルにしたい場合に有用です。
- デフォルト値:none
- 適用:全要素
- 継承:しない
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ○/IE9: ○
設置サンプル
<style type="text/css"> div.borderstyle4 { padding:10px 15px; border:6px solid #ccc; border-bottom-style:dotted; border-top-style:dotted; } </style> <div class="borderstyle4"> border:6px solid #ccc; border-bottom-style:dotted; border-top-style:dotted; </div>
border-width
ボーダーの幅を指定
unknown
border-widthプロパティは、ボーダーの幅(太さ)を指定します。
- デフォルト値:medium
- 適用:全要素
- 継承:しない
値
値 | 説明 |
---|---|
thin | 細め。 |
medium | 通常(デフォルト値)。 |
thick | 太め。 |
<長さ> | px、em など。 ※%指定不可。 |
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ○/IE9: ○
設置サンプル
例
<style type="text/css"> div.thin { margin:3px; padding:3px; border:thin solid silver; /* 細め */ } div.medium { margin:3px; padding:3px; border:medium solid silver; /* 通常 */ } div.thick { margin:3px; padding:3px; border:thick solid silver; /* 太め */ } div.border10 { margin:3px; padding:3px; border:10px solid silver; /* サイズ指定 */ } </style> <div class="border10"> <div class="thick"> <div class="medium"> <div class="thin">border-width</div> </div> </div> </div>
例:値を2、3、4つ指定した場合
<style type="text/css"> #border_width_val4 { margin:0 0 10px 0; padding:5px; border-color:hotpink; border-style:solid; border-width:thin medium thick 10px; } #border_width_val4_2 { margin:0 0 10px 0; padding:5px; border-color:hotpink; border-style:solid; border-width:thin medium thick; } #border_width_val4_3 { margin:0 0 10px 0; padding:5px; border-color:hotpink; border-style:solid; border-width:thin medium; } </style> <div id="border_width_val4">border-width:thin medium thick 10px; 上 右 下 左</div> <div id="border_width_val4_2">border-width:thin medium thick; 上 左右 下</div> <div id="border_width_val4_3">border-width:thin medium; 上下 左右</div>
border-*-width
各ボーダーの幅を個別に指定
unknown
border-right-width: <border-width>
border-bottom-width: <border-width>
border-left-width: <border-width>
border-*-widthプロパティは、各ボーダーの幅を個別に一括指定できるショートハンドです。
ボーダーの幅を上下左右でそれそれに違う幅にしたい場合などに有用です。
- デフォルト値:medium
- 適用:全要素
- 継承:しない
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ○/IE9: ○
設置サンプル
<style type="text/css"> div.borderwidth4 { padding:10px 15px; border:3px solid #ccc; border-bottom-width:6px; border-right-width:6px; } </style> <div class="borderwidth4"> border:3px solid #ccc;<br> border-bottom-width:6px;<br> border-right-width:6px;<br> </div>
border-bottom-width:6px;
border-right-width:6px;