<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>実践枠で囲む</title>
<style>
<!--
* {
margin: 0;
padding: 0;
}
-->
body {
font-size: 1.0em;
}
p {
margin: 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: 4px solid #296;
border-right: 1px dotted #296;
border-bottom: 1px dotted #296;
border-left: 12px solid #296;
}
.border6 {
border-top: 2px solid #269;
border-bottom:4px double #269;
border-left: 1px solid #269;
}
</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>
