borderの適用要素

いろいろなHTML要素にborderスタイルを設定してみました。

Sample

これはＰタグです

これはDIVタグです。この中のテキストの一部にSPANタグとEMタグとｂタグを入れ、borderスタイルを設定した。

番号付きリスト（borderスタイルあり）
番号付きリスト（borderスタイルなし）

定義付きリスト　１: borderスタイルなし
定義付きリスト　２: borderスタイルあり

abcde	efjhi	jklmn
123	456	789

これは<MARQUEE>タグだ～ヨ

（水平線にborderスタイルを設定）

・このページのbodyタグと上部タイトル内の「CSS」画像にborderスタイルを設定（bodyタグには”dotted”を指定したが、実線になってしまっている？？）
・borderスタイルはブロック要素に適用でき、インライン要素には適用できないはずだが。上の例のように、＜SPAN＞＜EM＞＜B＞タグに使える？？
・表では、<table>,<td>には適用できるが＜tr>には無効
・フォーム関連では<form>,text,checkbox,radio,bottonには有効、selectは無効

Sample Source......................................................................>>>

<body style="border:4px dotted #ff3300">
<img src="../images/logo_css.gif" style="border:1mm dashed #ccff33">

<p class="sample" style="border:1px solid navy;width:300px">これはＰタグです</p>
<div style="border:1px solid navy;width:450px">これはDIVタグです。この中のテキストの一部に
　　　　<span style="border:1px solid red">SPANタグ</span>と
　　　　<b style="border:1px solid red">EMタグとｂタグ</b>を入れ、
　　　　<em style="border:1px solid red">borderスタイルを設定</em>した。</div>
<ol style="border:1px solid navy;width:300px">
  <li style="border:1px solid red">番号付きリスト（borderスタイルあり）
  <li>番号付きリスト（borderスタイルなし）
</ol>
<dl style="border:1px solid navy;width:300px">
  <dt>定義付きリスト　１
  <dd>borderスタイルなし
  <dt style="border:1px solid red">定義付きリスト　２
  <dd style="border:1px solid green">borderスタイルあり
</dl>

<table style="border:thin solid blue" border="1" cellpadding="2" cellspacing="0">
  <tr>
    <td>abcde</td>
    <td style="border:thin solid red">efjhi</td>
    <td>jklmn</td>
  </tr>
  <tr style="border:thin solid red">
    <td>123</td>
    <td>456</td>
    <td>789</td>
  </tr>
</table>

<form style="border:thin dotted red">
　<input style="border:thin solid blue" type="button" value="ボタン" name="B2">
  <input style="border:thin solid blue" type="text" size="15" value="Textボックス"> 
　<input type="checkbox" name="C1" value="ON">
　<input style="border:thin solid blue" type="checkbox" name="C2" value="ON">
　<input type="checkbox" name="C3" value="ON"> 
　<input style="border:thin solid blue" type="radio" value="V1" checked name="R1">
　<input type="radio" name="R1" value="V2"> 　 　
<select style="border:thin solid blue" name="D1" size="1">
  <option style="border:thin solid blue" selected>オプション１ </option>
  <option>オプション２ </option>
  <option>オプション３ </option>
  <option>オプション４ </option>
</select> 
　<input style="border:thin solid blue" type="reset" value="リセット" name="B2">
</form>

<marquee style="border:thin solid pink">これは&lt;MARQUEE&gt;タグだ～ヨ</marquee>
<hr style="border:2px dashed green;width:400px;height:3mm;color:#99ffff">