こんにちは、パソコンワンポイントレッスン！
PCインストラクターの川上です。
囲い枠について色々と書いていますが、まだレッスンしていなかったことがありましたね^^;
というのも、このようなご質問が。
フリースペースで、川上さんが紹介されていたfieldset（フィールドセット）タグを使っています。
囲い線の色を変えるにはどうすれば良いでしょうか？
通常のfieldsetタグの枠線はグレーの直線なのですが、
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset><legend><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
その枠線の色や種類を変えることができます。
例えば、太さ1pxの赤色の実線で囲むと
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:1px solid #ff0000;"><legend><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
となります。
borderは境界線の太さ、スタイル、色を一括で指定します。
border: 1px solid #ff0000;
（半角スペースで区切ります。）
＝スタイルの種類＝
none ･･･ 枠線なし（ボーダーの幅の値は0になる)
dotted ･･･ 点線（丸い点線）
dashed ･･･ 破線（四角い点線）
solid ･･･ 実線
double ･･･ 二重線
groove ･･･ 立体枠（窪み）
ridge ･･･ 立体枠（隆起）
inset ･･･ 立体枠（内側全体が窪み）
outset ･･･ 立体枠（内側全体が隆起）
・5px・立体枠（窪み）の紺色（カラーコード：#000066）は↓
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:5px groove #000066;"><legend><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
・5px・立体枠（内側全体が隆起）のピンク色（カラーコード：#ff1493）はこちら↓
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:5px outset #ff1493;"><legend><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
・3px・点線の緑色（カラーコード：#008000）はこちら↓
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:3px dotted #008000;"><legend><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
でも、点線や破線の場合、見出しの背景に表示されます（IE10の場合）ので、このようにしたりします。
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:3px dotted #008000;"><legend style="background-color:#ffffff;"><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
・3px・破線のオレンジ色（カラーコード：#ff9933）はこちら↓
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:3px dashed #ff9933;"><legend style="background-color:#ffffff;"><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
・4px・二重線の茶色（カラーコード：#994c00）はこちら↓
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:4px double #994c00;"><legend><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
・5px・立体枠（隆起）の黄色（カラーコード：#ffd400）はこちら↓
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:5px ridge #ffd400;"><legend><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
・2px・実線の黒色（カラーコード：#000000）はこちら↓
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="border:2px solid #000000;"><legend><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
・見出し付きの影付きピンク色（カラーコード：#ff1493）はこちら↓
↓画像表示
↓ブラウザ表示
↓ソース
<fieldset style="padding:10px; font-size:1em;border:2px solid #ff1493;width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><legend style="margin-left:8px; padding:6px 10px;background-image:linear-gradient(to right,#ff1493,#ff1493,white);background-color: #ff1493; color:#ffffff; font-weight:bold;box-shadow: 5px 5px 5px #AAA;text-shadow:1px 1px 3px #000;border-radius:8px;"><strong>◆枠の見出し◆</strong></legend>1）本文１<br>2）本文２<br>3）本文３</fieldset>
さらに、ご自分専用の色で作成したい方は、色見本サイトで探してみてくださいませ^^
色見本と配色サイト
WEB色見本 原色大辞典
以上、パソコンワンポイントレッスンでした。
LIDS札幌・ライフデザインスクール
川上 雄大