posted on:March 14, 2008
3 Simple Steps in Coding a Rounded Corners Layout
What we should aim in coding is simplicity and try to avoid any unnecessary markup. Various rounded corners techniques often include several additional elements that are purely presentational.
When talking about fixed width, rounded corners layout, there’s no need for complications.
Let me show you my approach to coding just that, fixed width, rounded corners layout in 3 simple steps.
As a special treat, PSD and XHTML/CSS files included in this brief tutorial 🙂
Markup is pretty basic, and as you can see, there are no additional divs for top or bottom corners.
<div id="container"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div>
Step 1 – Header
In order to simplify things I often crop entire header as a single background image. The size of the image rarely exceeds
50kb and it also makes additional changes a lot easier to apply.
With this particular layout we’ll add something extra to the header cropping. We’ll not
only crop entire header, but the top corners of the content area as well. That area is not
meant to have any content, it’s just for presentation. It really doesn’t matter if we put it at
the bottom of the header background image.
Note: if you use repeating gradient image for body background, like I do in my example, keep
the height of the repeating image same or less than header height. That will make your life
easier because you will not have adjust the body background in the content area.
Step 2 – Content
Unlike other sections, content area is expandable in height. Of course, we’ll use 1px high gif that repeats vertically. We all know that 🙂
Step 3 – Footer
Similar as with header, we are avoiding additional markup for bottom corners of the content area.
So, we’ll "close" the content area with footer background image. So footer’s background is
used for end of the content and beginning of the footer.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (45 Comments)
Sorry, the comment form is closed at this time.