border-*
各ボーダーのプロパティ一括指定

unknown

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の使用例

• PHP
• JavaScript
• HTML
• CSS
• MySQL

---

▼border-leftの使用例

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の使用例