อยากทราบว่ากรอบที่ผมนำมาให้ดูนี้เขากำหนด css ยังไงเหรอครับถึงแบ่งเป็นสองสีด้านบนกับล่าง

<style>
html,body{margin:0px;padding:20px;}
#box-comment{
	margin:0px;
	padding:0px;
	float:left;
	width:500px;
}
#box-comment h1{
	margin:0px;
	padding:5px;
	width:490px;
	background:#ab4e47;
	color:#FFF;
	-moz-border-radius-topright:5px;; 
	-moz-border-radius-topleft:5px;
	font-size:16px;

}
#box-comment ol{
	margin:0px;
	padding:0 10px 15px 10px;
	background:#e6e2c7;
	list-style:disc;
	-moz-border-radius-bottomright:5px;; 
	-moz-border-radius-bottomleft:5px;
}
#box-comment ol li{
	border-bottom:1px dotted #FFF;
	display:block;
	text-align:left;
	
}
#box-comment ol li a{
	text-decoration:none;
	color:#443828;
}
</style>

<div id="box-comment">
	<h1>head content</h1>
	<ol>
		<li><a href="#">menu content 1</a></li>
		<li><a href="#">menu content 2</a></li>
		<li><a href="#">menu content 3</a></li>
		<li><a href="#">menu content 4</a></li>
		<li><a href="#">menu content 5</a></li>
		<li><a href="#">menu content 6</a></li>
		<li><a href="#">menu content 7</a></li>
	</ol>
</div>