Here is a method I use for rounded corners. I only have a solid color method as of now also this does not work in IE6
I dont really feel like explaining selectors so you might want to look that up if you dont understand.
This will expand by height and width and requires only one image.
Code:
*{ padding:0; margin:0;}
html { background: #45473f; height: auto; }
body { width: 80%; margin: 20px auto; font-size:10px; font-family: Arial, Helvetica, sans-serif; }
p { font-size: 1.2em; line-height: 1.2em;}
p ~ p { margin: 1.2em 0 0 0; }
/* *** Round Corners #ffc658 - (background-position: -28px 0;) + (width: 12px;) or (height: 12px;) = background width *** */
.round_container div { background: #ffc658 url(images/sprite-round_corner.png) no-repeat; overflow: hidden; min-height:12px; line-height: 12px; padding:0; }
div.round_corners { background-position: 0 0; background-color: transparent; float: left; width: 12px; height:12px; padding:0; }
.round_corners + div { background-position: -28px 0; background-color: transparent; float:right; width: 12px; height:12px; padding:0; }
div.round_content { padding: 0 12px; }
.round_content + div.round_corners { background-position: 0px -28px; }
.round_content ~ div { background-position: -28px -28px; }
Code:
<div class="round_container">
<div class="round_corners"></div><div></div><div> </div><!-- Round Corner Top -->
<div class="round_content">
<h2>Without Shadow</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat ac urna facilisis dignissim vel sed urna. Integer facilisis tortor hendrerit velit interdum volutpat nec ut arcu. Suspendisse purus leo, gravida ac condimentum nec, rhoncus ut felis. In hac habitasse platea dictumst. Etiam convallis metus nec odio mollis sed lacinia mi molestie. Donec interdum euismod nisi, non viverra felis laoreet vel. Phasellus libero sapien, vestibulum vel volutpat id, pharetra et augue. Praesent feugiat sollicitudin neque, eget facilisis dui hendrerit in. Donec ut augue justo, in fringilla orci. Curabitur ultrices, nulla varius vulputate eleifend, elit augue ullamcorper magna, vel interdum nibh sapien vitae dui. Donec tincidunt rhoncus magna, eu suscipit ipsum pharetra a. Mauris tempus nisi a ante tincidunt luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae mi nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sollicitudin feugiat augue a porta. Nulla mattis nibh at dui malesuada dapibus. Duis ullamcorper, sem quis tempus lobortis, tellus lacus convallis nisl, nec suscipit lectus sem ut quam.</p>
<p>Pellentesque vestibulum consequat rhoncus. Nunc pretium, odio a venenatis accumsan, ante libero lobortis ipsum, non mollis sem lacus ac lectus. Mauris placerat mollis orci, et tempus ipsum adipiscing vel. Fusce auctor neque et neque gravida rhoncus. Cras ac orci odio. Suspendisse potenti. In vel lorem ac nunc ornare suscipit. Curabitur a nibh nec diam aliquet viverra consequat at nunc. Maecenas lacinia sapien lobortis odio convallis nec imperdiet augue cursus. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis volutpat enim.</p>
<p>Sed et orci arcu, mattis interdum enim. Cras felis libero, consequat sit amet sodales in, ornare eget ante. Nullam eu leo quis velit suscipit fringilla a vitae dui. Fusce sem orci, aliquam sed dictum eget, sollicitudin non velit. Praesent nisl magna, consequat eu imperdiet sed, placerat vel ligula. Phasellus pulvinar magna et diam vehicula et pellentesque urna porta. Aliquam interdum, nulla sit amet viverra adipiscing, leo ligula condimentum tellus, et ultrices nunc est in ipsum. Vivamus sit amet nisl magna, ac aliquam erat. Suspendisse euismod, nisl non suscipit rhoncus, enim purus ullamcorper orci, eget fermentum lorem mauris sed nunc. In eu mi elit, sit amet dapibus orci. Phasellus vulputate varius ligula, at imperdiet sem adipiscing id. Curabitur eu erat quis quam cursus consectetur eget ac ligula. Donec ullamcorper ligula sit amet purus rutrum et accumsan quam vehicula. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras in interdum justo. Vivamus cursus, ligula vel posuere gravida, erat est fringilla libero, vitae accumsan libero turpis ut libero. Vivamus vestibulum congue magna non dignissim. Vestibulum quis mi tortor, eget</p>
</div>
<div class="round_corners"></div><div></div><div> </div><!-- Round Corner Bottom -->
</div>
Here is a link of how it will look
http://www.chefcss.com/examples/rounded_corners.html
Any new ideas to add to this will be appreciated.