A13

/*CSS*/
.s_content{
	width:400px;
	padding:15px;
	background-color:#FFF;
	}

.s_content ul li{
	padding:15px;
	margin:15px 15px 30px;
	}
.s_content ul #hyoujun{
	border:1px solid #666;
	}

.s_content ul #line_weight{
	border:3px solid #666;
	}
	
.s_content ul #line_color{
	border:1px solid #F00;
	}

.s_content ul #line_style{
	border:1px dotted #F00;
	}

.s_content ul #siege_1{
	border:1px solid #090;
	border-top:4px solid #090;
	border-left:6px solid #090;
	}
	
.s_content ul #siege_2{
	border:1px solid #03F;
	border-top:3px solid #03F;
	border-bottom:4px double #03F;
	}
<!--html-->
<div class="s_content">
<ul>
    <li id="hyoujun">テキストの囲みを表現したい[標準]</li>
    <li id="line_weight">テキストの囲みを表現したい[線の太さ]</li>
    <li id="line_color">テキストの囲みを表現したい[線のカラー]</li>
    <li id="line_style">テキストの囲みを表現したい[線のスタイル]</li>
    <li id="siege_1">テキストの囲みを表現したい[複数の指定]</li>
    <li id="siege_2">テキストの囲みを表現したい[複数の指定]</li>
</ul>
</div>