■ ボックスの枠線に関する設定

◆枠線のスタイルを指定する

(css file)
p{
　background-color:#fc3;
　border-width:10px;
　width:300px;
}
.solid{ border-style:solid; }
.double{ border-style:double; }
.groove{ border-style:groove; }
.ridge{ border-style:ridge; }
.inset{ border-style:inset; }
.outset{ border-style:outset; }
.none{ border-style:none; }

(html file)
<p class="solid">　solid</p>
<p class="double">　double</p>
<p class="groove">　groove</p>
<p class="ridge">　ridge</p>
<p class="inset">　inset</p>
<p class="outset">　outset</p>
<p class="none">　none</p>

　solid

　double

　groove

　ridge

　inset

　outset

　none

これらは border-style プロパティのプロパティ値を１つだけ指定しましたが、２つ指定すると、１つめが上下、２つめが左右の枠線スタイルになります。３つ指定すると、上、左右、下の順、４つ指定すると、上、右、下、左の順（時計回り）になります。
また、border-top-style 、border-left-style プロパティなどで、個別に指定することもできます。

タグ名{ border-style:top値 right値 bottom値 left値; }

(css file)
div{
　border-style:solid double groove ridge;
　border-width:8px;
}

(html file)
<div>
このように枠線スタイルのプロパティ値を４つ指定すると、上、右、下、左の枠線スタイルを別々に指定することができます。値と値の間のスペースを忘れないでね。
</div>

◆枠線の太さを指定する

(css file)
p{
　background-color:#fc3;
　border-style:solid;
　width:300px;
}
.thin{ border-width:thin; }
.medium{ border-width:meidum; }
.thick{ border-width:thick; }
.1cm{ border-width:1cm; }
.20px{ border-width:20px; }

(html file)
<p class="thin">　細い枠線です</p>
<p class="medium">　これが中間の太さの枠線です</p>
<p class="thick">　太い枠線です</p>
<p class="1cm">　枠線の太さ10pxです</p>
<p class="20px">　こっちは太さ1cmだよ</p>

　細い枠線です

　これが中間の太さの枠線です

　太い枠線です

　枠線の太さ10pxです

　こっちは太さ1cmだよ

枠線のスタイルを設定したときと同様に、プロパティ値を４つまで指定することができます。
また、border-top-width 、border-left-width プロパティなどを使えば、個別に指定することもできます。

タグ名{ border-width:top値 right値 bottom値 left値; }

(css file)
div{
　border-style:solid;
　border-width:thin medium thick 10px;
}

(html file)
<div>
このように枠線の太さを設定するプロパティ値を４つ指定すると、上、右、下、左の枠線の太さを別々に指定することができます。値と値の間のスペースを忘れないでね。
</div>

◆枠線の色を指定する

(css file)
p{
　border-style:solid;
　border-width:10px;
　width:300px;
}
.1color{ border-color:#800; }
.2color{ border-color:#c66 #903 #903 #c66; }

(html file)
<p class="1color">
枠線の色を指定するには border-color プロパティを使います。値を１つだけ記述すると４辺が同じ色になります。
</p>
<p class="2color">
値を４つ記述した場合は、上、右、下、左の順で枠線の色を別々に指定することができます。ここは上と左、右と下を同じ色にしています。
</p>

枠線の色を指定するには border-color プロパティを使います。値を１つだけ記述すると４辺が同じ色になります。

値を４つ記述した場合は、上、右、下、左の順で枠線の色を別々に指定することができます。ここは上と左、右と下を同じ色にしています。

◆枠線に関する設定をまとめて行う

border プロパティで枠線に関する設定をまとめて指定することもできます。
また、border-top 、border-left 、border-right 、border-bottom プロパティで、それぞれ上、左、右、下線に関する設定をまとめて指定することができます。

タグ名{ border:style値 width値 color値; }

(css file)
h4{ border:inset 10px #03f; width;400px; }

(html file)
<h4>
　枠線に関する設定をまとめて行う
</h4>

　枠線に関する設定をまとめて行う