CSS課題：文字を囲む

css00 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>実践枠で囲む</title>

<style type="text/css">
<!--
body {
    font :1.0em;
}
.border1,.border2,.border3,.border4,.border5,.border6 {
    marigin: 12px 0;
    padding: 12px;
}

.border1 {
    border: 1px solid #666;
}
.border2 {
	border: 4px solid #666;
	}
.border3 {
	border: 1px solid #F00;
	}
.border4 {
	border: 1px dotted #666;
	}
.border5 {
	border-top: 3px solid #390;
	border-right: 1px solid #390;
	border-bottom: 1px solid #390;
	border-left: 6px solid #390; 
	}
.border6 {
	border-top: 3px solid #00F;
	border-right: none;
	border-bottom: 1px double #00F;
	border-left: 1px solid #00F;
	}

-->
</style>

</head>

<body>
<div id="box1">
<p class="border1">テキストの囲みを表現したい[標準]</p>
<p class="border2">テキストの囲みを表現したい[線の太さ]</p>
<p class="border3">テキストの囲みを表現したい[線のカラー]</p>
<p class="border4">テキストの囲みを表現したい[線のスタイル]</p>
<p class="border5">テキストの囲みを表現したい[複数の指定]</p>
<p class="border6">テキストの囲みを表現したい[複数の指定]</p>
</div>
</body>
</html>