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

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.

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.

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

Enjoyed the article?

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

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (45 Comments)

1. kevin
   March 14, 2008

   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
   March 14, 2008

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

3. panDyskoteka
   March 14, 2008

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

4. cssglobe
   March 14, 2008

   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.
   March 14, 2008

   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?
   March 14, 2008

   Thanks for the example!

7. Optimas
   March 14, 2008

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

8. giannhse
   March 15, 2008

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

9. Alex -Tucson Web Design
   March 17, 2008

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

10. Dallas Web Designer
    March 17, 2008

    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
    March 18, 2008

    Yeah. Nice, simple tutorial, Alen. Stumbled!

12. John Faulds
    March 19, 2008

    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
    March 19, 2008

    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
    March 21, 2008

    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
    March 23, 2008

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

16. cssglobe
    March 23, 2008

    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
    March 24, 2008

    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
    March 27, 2008

    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
    March 28, 2008

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

20. Jad Graphics
    April 2, 2008

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

21. ididthis
    April 3, 2008

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

22. cssglobe
    April 3, 2008

    Thanks guys :) css IS easy :)

23. Quoka
    April 4, 2008

    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
    April 5, 2008

    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
    April 8, 2008

    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
    May 8, 2008

    Great tips !!!

27. Roman
    May 20, 2008

    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
    May 27, 2008

    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
    June 4, 2008

    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
    June 14, 2008

    Wow! Great, pretty simple tutorial. Thanks!

31. Ed Thomson
    June 14, 2008

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

32. sophy
    June 16, 2008

    Thanks so much!

33. Kevin
    June 16, 2008

    @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
    July 7, 2008

    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
    July 7, 2008

    ummm, oops no HTML allowed. sorry :P

36. Sean OBeara
    July 17, 2008

    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
    December 10, 2008

    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
    March 9, 2009

    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
    March 29, 2009

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

40. Tomy
    April 5, 2009

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

41. W
    April 17, 2009

    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
    April 22, 2009

    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
    May 1, 2009

    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
    May 23, 2009

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

45. talha
    June 12, 2009

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

Sorry, the comment form is closed at this time.