CSS Flexible rounded corners box with one (single) background image

Monday, 23 June 2008

Here's my technique for rendering rounded corner boxes for Joomla. It's flexible, it can stretch both horizontally and vertically.

I use one large background image cleverly positioned in each of module's nested divs.

One image means one HTTP request, and this is as good as it gets for loading speed. The only limitation with this technnique is that a module cannot be infinitely large, it must be a bit smaller than the background image. The image i'm using is 775px wide x 1969px tall, so it should accomodate very large modules. It only weights 15.6KB

There are no IE hacks, it just works in all browsers(tested in Firefox, Opera 9, IE6, IE7).

So, let's get on to the CSS:

/*TeachMeJoomla's  flexible rounded corners module CSS*/
 /*image setup */
 div.module-green, div.module-green div{
 background:  url('images/rounded_green.jpg');  
 }
 /*replaced with TeachMeJoomla's single image technique*/
  div.module-green
 {
 padding: 0px 0px 0px 0px;
 margin:0px 0px 0px 0px;
 background-repeat:no-repeat;
 background-position:bottom left;
 height:1%;
 width:auto;
 }
  div.module-green div
 
 {
 margin:0px 0px 0px 13px;
 background-repeat:no-repeat;
 background-position: bottom right;  
 padding: 0px 0px 13px 0px;
 width:auto;
 }
 div.module-green div div 
 {
   background-position: top right;
     margin: 0px 0px 0px 0px; 
     padding: 0px 0px 0px 0px;
 }
 div.module-green div div div 
 {
   margin:0px 13px 0px -13px;
   background-position: top left;
   padding: 13px 0px 0px 13px;
 }
 /*reset nested divs*/
  div.module-green div div div div
 {
 padding:0px 0px 0px 0px;
 margin:0px 0px 0px 0px;
   background:none;
     background-image: none;
     background-position: top left;
     background-repeat: repeat;
     background-color: transparent;
     width:100%;
 }

Here's the HTML, generated from your template by

  mosLoadPosition('module_position',-3)

or (Joomla! 1.5)

<jdoc:include type="modules" name="module_position" 
 style="rounded"   headerLevel="3" />

<div class="module-green">
       <div>
         <div>
           <div>
           <p>
           Look! I'm a flexible rounded corners box 
 with 1 single background image!
           here's more HTML
           </p>
           <ul>
             <li>item</li>
             <li>item</li>
             <li>item</li>
             <li>item</li>
           </ul>          
           </div>
         </div>
       </div>
 </div>

And here's the final rendered box.

Look! I'm a flexible rounded corners box with 1 single background image!

Here's more HTML

item
item
item
item

Give us some social love (it really works now)!

Comments (5)

1. What about transparent corners28-06-2008 04:19

Ron Lubensky http://members.optusnet.com.au/rlubensky/

Am using CSS very similar to yours, but my problem is that my client's site has watermark background, and I need transparent corners. I've done the graphic, that's not the problem, it's just that the top level div background is seen under the bottom corners. Without trying your solution, which is nice and clean, it doesn't look to quite do it. I can horizontally margin the top two divs, that's fine. But the bottom corners remain a mystery. Any ideas welcome!

2. Canvas corners28-06-2008 15:04

Tudor http://teachmejoomla.net

You could actually have the browser draw them by using canvas and it's IE "port".
Mocha UI implements this
http://mochaui.com/demo/

3. does not work in ie7 for me13-07-2008 01:05

dave http://jasonupton.net

I tried this out and it worked great for firefox, but, no go for ie7. Kan't seem to figure out why...

4. @dave: DOCTYPE29-08-2008 10:47

Tudor

Try using a strict DOCTYPE
browser reset CSS should also be included before the rounded corner CSS.
If it still does not work, there may be issues with your CSS layout

5. Image15-09-2008 18:36

Javier http://www.enloalto.net

Great Code!
Could you please show us how you created the image.

Thanks

Write Comment