Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

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?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• 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.

• 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.

• panDyskoteka on 14 Mar, 2008 wrote:

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

• 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.

• 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!

• Fubiz? on 14 Mar, 2008 wrote:

  Thanks for the example!

• Optimas on 14 Mar, 2008 wrote:

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

• giannhse on 15 Mar, 2008 wrote:

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

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

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

• 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.

• Armen on 18 Mar, 2008 wrote:

  Yeah. Nice, simple tutorial, Alen.
  Stumbled!

• 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.

• 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

• 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.

• Josh Miller on 23 Mar, 2008 wrote:

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

• 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.

• 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.
  
  

• 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...
  
  
  
  Read more: http://www.quirksmode.org/css/condcom.html
  http://msdn2.microsoft.com/en-us/library/ms537512.aspx

• Frank Rosendahl on 28 Mar, 2008 wrote:

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

• Jad Graphics on 2 Apr, 2008 wrote:

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

• ididthis on 3 Apr, 2008 wrote:

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

• cssglobe on 3 Apr, 2008 wrote:

  Thanks guys :)
  css IS easy :)

• 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

• 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.

• 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.

• krishnamoorthy manickam on 8 May, 2008 wrote:

  Great tips !!!

• 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
  
  
  

• 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.

• 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.

• Violetta Grawson on 14 Jun, 2008 wrote:

  Wow! Great, pretty simple tutorial.
  Thanks!

• Ed Thomson on 14 Jun, 2008 wrote:

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

• sophy on 16 Jun, 2008 wrote:

  Thanks so much!

• 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.

• 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. ^^

• Richard Vanbergen on 7 Jul, 2008 wrote:

  ummm, oops no HTML allowed. sorry :P

• 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!