written on:14 Mar, 2008 by Alen Grakalic

3 Simple Steps in Coding a Rounded Corners Layout

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

image

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 :)

Take a look at the demo | Download zip file

layout

Markup

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.

step1

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 :)

step2

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.

step3

That's it, view live example or download files (PSD included, yeah!)

About the author:

cssglobe's image Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Read more! Here are our most recent articles:

View All Articles

Comments

  1. kevin on 14 Mar, 2008 wrote:

    Nice tutorial. I still cut the entire thing into several slices and make many divs in my html. Though my site passed w3c validation, it's really "code-unreadable". I think I'm going to recode my site anyway, to make it more simple and friendly.

  2. Niall Doherty on 14 Mar, 2008 wrote:

    Nice and easy. Never thought of doing it like that. I love the simple mark-up. Thanks for sharing.

  3. panDyskoteka on 14 Mar, 2008 wrote:

    sorry but this tuts is for noobs, eweryone can do that without tut

  4. cssglobe on 14 Mar, 2008 wrote:

    Thanks guys!
    panDyskoteka, as more people start to read Css Globe I realize that they are not all experts and I wanted to share something simple.

  5. S. on 14 Mar, 2008 wrote:

    sometimes it's the non-noobs that need to be reminded to not make things so complicated. and I plan to do just that.
    Thanks!

  6. Fubiz? on 14 Mar, 2008 wrote:

    Thanks for the example!

  7. Optimas on 14 Mar, 2008 wrote:

    I agree, its good to get back to basics - simplicity drives efficiancy.

    regards

  8. giannhse on 15 Mar, 2008 wrote:

    Great info. Thanks I will have it a go :)

  9. Alex -Tucson Web Design on 17 Mar, 2008 wrote:

    Awesome, i love how simple this tutorial is.
    Thanks!

  10. Dallas Web Designer on 17 Mar, 2008 wrote:

    This was good, if nothing else it taught us to remember that sometimes the answer to a problem can be basic but yet effective.

  11. Armen on 18 Mar, 2008 wrote:

    Yeah. Nice, simple tutorial, Alen.
    Stumbled!

  12. John Faulds on 19 Mar, 2008 wrote:

    While it's good to use as few elements as possible, you also need to be aware of other factors like differences in font-size (both at the OS and browser level). While this layout doesn't suffer too much when you increase the size of the text, it won't work so well in all situations if there is more text in either the header or footer or the space above and below the text is tighter.

  13. Sunlust on 19 Mar, 2008 wrote:

    Wow, it's so easy, I am still learning how intelligent image manipulation can completely change websites apperance.

    Thanks a lot for this post and for downloable version.

    Sunlust

  14. Lee on 21 Mar, 2008 wrote:

    This isn't a good tutorial for developing correctly. What happens when the user increases the size of the header/footer text? From what I can see, the background will not extend with it and therefore text will overflow or be cut (depending on your css), creating a very ugly site. A bit way would be to make the header and footer expand too.

  15. Josh Miller on 23 Mar, 2008 wrote:

    Very nice thought process, I am interested in a response to Lee's remarks.

  16. cssglobe on 23 Mar, 2008 wrote:

    Obviously this is not applicable (at least in a way I presented it here) to variable height header or footer. I do a lot of designs (300+ last year) and I rarely have headers with variable height.
    As for the footer you can easily make it variable in height if you use additional elements. I often use a paragraph with copyright info for the "bottom" element.

  17. jive on 24 Mar, 2008 wrote:

    Nice. I have been doing this for years, and have always wondered why folks have done it other wise. Actually depending on the content, it might be best to do this:
    <h1 id="headerimage">Rounded Corner header</h1>
    <p id="contentbackground">Rounded Corner Content</p>
    <div id="rooterimage">Rounded Corner Footer</div>
    Less markup and a bit more semantically correct.

  18. Frank Rosendahl on 27 Mar, 2008 wrote:

    Conditional comments can be useful - when having the perfect css - with only a few minor "feature-fixes" for the MS IE-browser...

    <!--[if IE]>
    <style type="text/css">
    ... your MS IE spesific css here... or even linking a css-file...
    </style>
    <![endif]-->

    Read more: http://www.quirksmode.org/css/condcom.html
    http://msdn2.microsoft.com/en-us/library/ms537512.aspx

  19. Frank Rosendahl on 28 Mar, 2008 wrote:

    sorry folks - for the above post - my mistake (posted to wrong article... )

  20. Jad Graphics on 2 Apr, 2008 wrote:

    Great tutorial! Thanks! Very nice. I really like your blog.

  21. ididthis on 3 Apr, 2008 wrote:

    Bloody Marvelous! It almost makes CSS easy! I can't get enough.

  22. cssglobe on 3 Apr, 2008 wrote:

    Thanks guys :)
    css IS easy :)

  23. Quoka on 4 Apr, 2008 wrote:

    Nice example of using the materials available.
    In this age of "do it with Javascript" , many people seem to forget the simple options

  24. James Abney-Hastings on 5 Apr, 2008 wrote:

    Great article, both as a starting point for beginners and a good reminder on the benefits of simplicity for those more used to CSS. I have used this technique, or variants on it, on many sites with great success.

  25. Beth on 8 Apr, 2008 wrote:

    Yet another "hey what a great article" post, but hey - what a great article.

    it is indeed very easy to get lost up your own nether regions when bumping over from static, image/table based layouts to a more flexible css route. as i've found recently.

    all these statements, whether you're new to this industry or not, make absolute sense.

    good man. have a banana.

  26. krishnamoorthy manickam on 8 May, 2008 wrote:

    Great tips !!!

  27. Roman on 20 May, 2008 wrote:

    Nice article, although I don't think it's technically (from CSS view point) extraordinary It's simple, but it also doesn't scale in size, since you are using single images.
    When developing kogelberg.at I was using this as a source
    http://www.alistapart.com/articles/customcorners2/
    4 singel images that define the background of your box, and, given enough height/width, the images scale with the size of your browser fontsize. I think it's far more advanced, although not so easy to maintain, if you want to exchange the background images.
    To get an idea, tak a look at
    kogelberg.at

    But I really appreciate the design of your website - currently about to explore :-)

    Regards, Roman


  28. Rsk on 27 May, 2008 wrote:

    This is not a tutorial, just a waste of time. We life in 2008 Web 2.0 with floating and nested layouts... Sorry, but zero points.

  29. Matt Mikulla on 4 Jun, 2008 wrote:

    I would like to point out how excellent article title is:
    "3 Simple Steps in Coding a Rounded Corners Layout"
    It really reinforces the truth that we can make things simple. Sure, you could slice up the layout into more images and allow for flexibility, but as you mentioned, you would need to edit all of those slices if your layout needed alteration. I would rather edit 3 than many more and then have to hassle with more html and css markup.

  30. Violetta Grawson on 14 Jun, 2008 wrote:

    Wow! Great, pretty simple tutorial.
    Thanks!

  31. Ed Thomson on 14 Jun, 2008 wrote:

    Great tips. Thanks a lot for this post and for downloable version.

  32. sophy on 16 Jun, 2008 wrote:

    Thanks so much!

  33. Kevin on 16 Jun, 2008 wrote:

    @Rsk: Just because it's easy doesn't mean it's bad or outmoded. Nested Layouts? You mean tag soup. Use whatever method you must to stroke your ego, I, for one, will go back to providing content instead of spending a weekend trying to get the floats to work right.

  34. Richard Vanbergen on 7 Jul, 2008 wrote:

    It's a good, simple way of achiving a nice effect. Just two things spring to mind. First, what happens when you have a flexible layout with expanding content? We would have to go back to the (much more) complicated code. Finaly, although the code is slightly more complicated if we created somthing like:

    <div>
    <img src="example.jpg" class="leftBorder"></div>
    <div class="headerBG"><h1>heading</h1><p>Tagline</p>
    <img src="example.jpg" class="rightBorder"></div>
    </div>
    For the header, a 1x250 image (repeat-x) will load a lot faster then a 800x250 images.

    There is a reason we like to make things difficult for ourself. ^^

  35. Richard Vanbergen on 7 Jul, 2008 wrote:

    ummm, oops no HTML allowed. sorry :P

  36. Sean OBeara on 17 Jul, 2008 wrote:

    excellent! i love finding these little trinkets!! im only learning the css and globe is the best place to be!! thanks a million!

  37. Thomas on 10 Dec, 2008 wrote:

    Hey, the effect is nice. However you did not explain how to use the segments etc in the psd file.

    If I would like to make an 800 px width site, how do I apply your technique to it?

    I'm doing an project which has to be done on monday, and my only obstacle is making the rounded corners..

    Please link to or make a small psd-segment-how-you-did tut.

    Thanks alot / T

  38. sergio on 9 Mar, 2009 wrote:

    Useless tutorial. Good SEO for us to reach it.
    People asking for rounded corners already know to use photoshop. No need to say what we were expecting. Almost an insult.

  39. Diego on 29 Mar, 2009 wrote:

    It's a great article.
    It helps me a lot with a new project I'm working on.

    Thanks!

  40. Tomy on 5 Apr, 2009 wrote:

    Hey nice Design,
    i have a question:
    Can I use this template in my projekt ?
    thanks for answering

  41. W on 17 Apr, 2009 wrote:

    Would it make any difference if the background images for the header, footer, and content were .png instead of .jpg? (provided of course that you do account for the browsers that don't do .png files well).

    I have a striped background with rounded corners so I need the transparency of the header and footer.

    Great article.
    Thanks.

  42. zh on 22 Apr, 2009 wrote:

    er, my English is poor,but I try my best to understand this article with a dic.. then I found it consists of 3 images.. maybe simplicity drives efficiancy.. but e e e . I have no word.
    good luck!

  43. Ray Cassidy on 1 May, 2009 wrote:

    Glad I've found this little treasure trove. Nost explanations of coding are so convoluted, I simply lose the will to live after a couple of paragraphs. A question though, how do you go about the simple (?) task of cropping images out for banners and header backgrounds.
    Cheers,
    Ray

  44. Ahmed Elgendi on 23 May, 2009 wrote:

    Fine tutorial! you could do the same horizontaly over the repeating pixels to save size.
    regards
    Ahmed

  45. talha on 12 Jun, 2009 wrote:

    thanks very very good tutorial and very imp... thankxxxx...

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Subscribe to CSSG Feed

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend