Real World HTML: Rounded Corners Box

In our last "Real World HTML" entry, we handled a funny joining of graphical lines. This time we need to handle some rounded corner boxes sitting on a gradient.

Before we go on, let's take a look at the box.

Login Box:

Whenever I sit a non-square shape on top of a gradient, I like to use a transparent PNG. This ensures that if the shape doesn't sit exactly where I expected (for whatever reason) or if the gradient needs to change, then it still looks good.

Whenever I have a rounded box like this, I also like to use a technique inspired by "Sliding Door of CSS", wherein I cut the box into two images: One has everything except the bottom part where it starts to curve and the other has everything except the same part on top. Then I nest two divs and each uses one of those images as a background - add a little padding and it all works well. It effectively nearly doubles my available height without returning to the designer.

I don't like to use two divs next to each other for this purpose, because a few times I have run into a gap between the divs because of a margin of a nested element.

This approach does not work with transparent PNGs, however, as the partial transparencies add up.

What Did I Do?

I hate to admit it, but I punted a bit on this one. I just used a single transparent PNG fixing my available size for the login box.

<div id="login">
   <div id="login-space">
      <h2>Login</h2>
      <form>
      ...
      </form>
      <p class="login-forgot"><a href="">Retrieve password</a></p>
   </div>
</div>

#login {
   background-image:url(i/login.png);
   background-position:top center;
   background-repeat:no-repeat;
   width:246px;
   height:187px;
}
#login-space {
   padding:15px 15px;
}

What Should I have Done?

What I should have done (and what I did do on a similar project not much later) was go ahead and use adjacent (instead of nested) divs. It gets all the advantages listed above with the only caveat being that I have to ensure I don't get messed up by a positive margin in a containing element - pretty easy to do really.

<div id="login">
   <div id="login-space">
      <h2>Login</h2>
      <form>
      ...
      </form>
      <p class="login-forgot"><a href="">Retrieve password</a></p>
   </div>
</div>
<div id="login-foot"></div>

#login {
   background-image:url(i/login-top.png);
   background-position:top center;
   background-repeat:no-repeat;
   width:246px;
   min-height:167px;
}
#login-space {
   padding:15px 15px;
}
#login-foot {
   background-image:url(i/login-bottom.png);
   background-position:bottom center;
   background-repeat:no-repeat;
   width:246px;
   height:20px;

}

What Next?

We are almost done with this site! The only thing after this is the printable style sheet.

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
I've used the following CSS to create round corners and tabs (No images required). It doesn't work in all browsers though (like IE8), but it's really easy to style and modify.

-moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; border:4px solid black; padding:12px;

More info on this blog post:
http://insideria.com/2010/04/adding-rounded-corner...
# Posted By James Moberg | 1/13/11 4:31 PM
James,

I am looking forward to those kinds of rounded corner techniques in the future. Right now, however, it is a nonstarter for me. I have to support IE7 and up on almost all of my sites (and IE6 and up on a great many of them).

That is a large part of the "Real World" part of the concept here - a lot of us still have to support these browsers that don't take advantage of the latest and greatest techniques.
# Posted By Steve Bryant | 1/13/11 9:50 PM
I'm must live on the other side of the real world where all websites function properly regardless of whether or not an element has rounded corners. I was required to add support for this visual style in IE, I'd use a jQuery function with browser detection to insert the IE-hacked divs into the DOM (especially since working with PNGs and IE6 already requires a hack). This would allow you to use only CSS while detecting whether you need to add support for IE browsers. This creates less code to maintain and you can always disable support globally by updating the single script instead of searching through code to modify the doubled DIVs.

Here's an example of how to wrap extra DIVs around your code (from 2006):
http://15daysofjquery.com/wrap-it-up-pretty-corner...

There are other javascript-based solutions too:
http://www.curvycorners.net/
http://jquery.malsup.com/corner/
http://blue-anvil.com/jquerycurvycorners/test.html...
# Posted By James Moberg | 1/14/11 8:54 AM
Yeah, my clients insist that the site look "right" on their browser.

The jQuery hack looks interesting though. I hadn't seen that. I will check it out.

Thanks for the tip.
# Posted By Steve Bryant | 1/14/11 11:02 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.