Thought this would be really easy to do, but everytime I apply padding elements go wacky.
<!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=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(http://kalsey.com/tools/css/rounded/images/tr.gif) no-repeat top right;
}
.roundbottom {
background: url(http://kalsey.com/tools/css/rounded/images/br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
</style>
</head>
<div class="roundcont">
<div class="roundtop">
<img src="http://kalsey.com/tools/css/rounded/images/tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<div class="roundbottom">
<img src="http://kalsey.com/tools/css/rounded/images/bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>
<body>
</body>
</html>
Any help greatly appreciated.