枠をつけてみよう
枠をつけてみよう

.
文字の枠
border:枠の色 枠の種類 枠の太さ; 
<font style="border:#ff0000 solid 1px;">
	文字の枠
</font>
文字の枠
ボックス領域の枠
border:枠の色 枠の種類 枠の太さ;
横100px
縦100px 
<div style="width:100px;height:100px;background:#ffcccc;">
	横100px<br>
	縦100px
</div>

横100px
縦100px 
<div style="width:100px;height:100px;background:#ffcccc;
border:#ff0000 solid 1px;">
	横100px<br>
	縦100px
</div>

横100px
縦100px 
<div style="width:100px;height:100px;
border:#ff0000 solid 1px;">
	横100px<br>
	縦100px
</div>

枠線の種類
border:#d0d0d0 solid 5px;
border:#d0d0d0 double 5px;
border:#d0d0d0 groove 5px;
border:#d0d0d0 ridge 5px;
border:#d0d0d0 inset 5px;
border:#d0d0d0 outset 5px;
border:#d0d0d0 dotted 5px;
border:#d0d0d0 dashed 5px;
border:none;
枠線の色
この文字と同じ色で枠線の色がみえるかな
  • style="border:transparent solid 1px;"
  • 枠線の色部分に transparent（透明）をした場合
  • win IE だけは その時の文字色で枠線の色を
  • 他のブラウザでは透明な枠線になる
枠線を個別に指定する
横100px
縦100px 
<div style="width:100px;height:100px;
	border-top:#ff0000 solid 1px;
	border-right:#0000ff dotted 3px;
	border-bottom:#008800 double 5px;
	border-left:#800080 dashed 7px;">
		横100px<br>
		縦100px
</div>

border-***: top right bottom left;
横100px
縦100px 
<div style="width:100px;height:100px;
	border-color:#ff0000 #0000ff #008800 #800080;
	border-style:solid dotted double dashed;
	border-width:1px 3px 5px 7px;">
		横100px<br>
		縦100px
</div>