list

Test 1

style code

div {
	background-color: black;
	display: table;
}

dl {
	 
	margin:4px 2px 0 2px; 
	padding:0px; 
	float:left; 
	width:40%; 
	display:inline;
}

dl dt {
	background-color: red;
	padding: 10px;
	text-align: center;
	font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif;
	font-size: 16px;
	
}
dl dd {
	padding: 0px;
	background:#eee ;
}

dd p {
	margin:0; 
	padding:10px !important; 
	line-height:1.1em;
	font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Segeo UI Light', Avenir light, sans-serif;
	font-size: 10px;
}

dl.top_rgt dt {
	border-top-left-radius: 20px;
}
dl.top_lft dt {
	border-top-right-radius: 20px;
}dl.bot_rgt dd {
	border-bottom-left-radius: 20px;
}
dl.bot_lft dd {
	border-bottom-right-radius: 20px;
}

html code

	<div><div class="tight">
	<dl class="top_rgt">
			<dt>TOP RIGHT SQUARE CORNER</dt>
			<dd><p>This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.</p></dd>
	</dl>
	<dl class="top_lft">
			<dt>TOP LEFT SQUARE CORNER</dt>
			<dd><p>This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.</p></dd>
	</dl></div><div class="tight">
	<dl class="bot_rgt">
			<dt>BOTTOM RIGHT SQUARE CORNER</dt>
			<dd><p>This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.</p></dd>
	</dl>
	<dl class="bot_lft">
			<dt>BOTTOM LEFT SQUARE CORNER</dt>
			<dd><p>This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.</p></dd>
	</dl>
			</div></div>