Hi Dan, Here's a recent post I wrote on our web design blog here at University of Alabama:
http://webtide.wordpress.com/2009/04/21/one-way-to-do-rounded-rectangles-with-css-background-images/ I don't know if it would match what you are looking for because it's more than one image - but it's 2 instead of 4. It's pretty simple and seems to be working fine unless I missed something in my testing. Hope this helps. Brian Brian Jones Web Communications Specialist The University of Alabama bjo...@ur.ua.edu 205.348.8315 > -----Original Message----- > From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css- > discuss.org] On Behalf Of Dan King > Sent: Friday, May 01, 2009 12:25 PM > To: css-d@lists.css-discuss.org > Subject: [css-d] How to make rounded corners box with one image? > > > I'm relatively new to css and for the past few weeks, I've been trying to > create a rounded corners box with one image. I've searched online but > nothing I've found so far clearly explains how to use one image to create > the rounded corners box. They all suggest to use four 'hooks' i.e. divs > and use background positioning to give each of the hooks a background > position of a corner. While I understand the concept, I'm at a loss for > moving thehooks into proper position using margins/padding. > > I'd like to learn/figure out how to logically/mathematically determine how > much margin/padding to use in order to position the background image > properly to create the rounded corners effect. Currently, I've been > guessing/checking. > > I was able to piece together from web searches html and css for a round > corners box. The end product does create a rounded corners box but, the > css used causes issues when floating the containing div and more > importantly, I don't understand how it works/comes together. > > Below is the html and css for the rounded corners box. If anyone could > review the code and help me understand how to properly (with clean and > simple css) put together a rounded corners box it would be appreciated. > > Thanks. > > HTML: > <div class="profileBox"> > <div class="title"> > <h3>Title</h3> > </div> > <div class="content"> > <p>Content</p> > </div> > </div> > > CSS: > ..profileBox, .profileBox .title, .profileBox .title h3, .profileBox > .content { > background: #FFFFFF url(../images/rd_indigo_box.png) no-repeat 100% 100%; > } > > ..profileBox{ > min-width: 225px; > max-width: 500px; > margin: 10px 5px; > padding: 0 10px 0 0; > }/* Bottom right */ > > ..profileBox .title{ > background-position: 100% 0; > margin: 0 -10px 0 0; > padding: 0 10px 0 0; > max-height: 4.5em; > overflow:hidden; > } /* Top right */ > > ..profileBox .title h3{ > background-position: 0 0; > float:left; > color:#FFFFFF; > margin: 0; > padding: 8px 15px 16px; > } /* Top left */ > > ..profileBox .content{ > background-position: 0 100%; > margin: 0; > padding: 5px 5px 10px 15px; > overflow: hidden; > } /* Bottom left */ > > -Dan > > > > > > ______________________________________________________________________ > css-discuss [cs...@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
