3 Simple Steps in Coding a Rounded Corners Layout

written on:14 Mar, 2008 by Alen Grakalic

3 Simple Steps in Coding a Rounded Corners Layout

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

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

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.

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

kevin 14 Mar, 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.
Niall Doherty 14 Mar, 2008

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

sorry but this tuts is for noobs, eweryone can do that without tut
cssglobe 14 Mar, 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.
S. 14 Mar, 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!
Fubiz? 14 Mar, 2008

Thanks for the example!
Optimas 14 Mar, 2008

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

regards
giannhse 15 Mar, 2008

Great info. Thanks I will have it a go :)
Alex -Tucson Web Design 17 Mar, 2008

Awesome, i love how simple this tutorial is.
Thanks!
Dallas Web Designer 17 Mar, 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.
Armen 18 Mar, 2008

Yeah. Nice, simple tutorial, Alen.
Stumbled!
John Faulds 19 Mar, 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.
Sunlust 19 Mar, 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
Lee 21 Mar, 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.
Josh Miller 23 Mar, 2008

Very nice thought process, I am interested in a response to Lee's remarks.
cssglobe 23 Mar, 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.
jive 24 Mar, 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.
Frank Rosendahl 27 Mar, 2008

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

sorry folks - for the above post - my mistake (posted to wrong article... )
Jad Graphics 2 Apr, 2008

Great tutorial! Thanks! Very nice. I really like your blog.
ididthis 3 Apr, 2008

Bloody Marvelous! It almost makes CSS easy! I can't get enough.
cssglobe 3 Apr, 2008

Thanks guys :)
css IS easy :)
Quoka 4 Apr, 2008

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 5 Apr, 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.
Beth 8 Apr, 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.
krishnamoorthy manickam 8 May, 2008

Great tips !!!
Roman 20 May, 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
Rsk 27 May, 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.
Matt Mikulla 4 Jun, 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.
Violetta Grawson 14 Jun, 2008

Wow! Great, pretty simple tutorial.
Thanks!
Ed Thomson 14 Jun, 2008

Great tips. Thanks a lot for this post and for downloable version.
sophy 16 Jun, 2008

Thanks so much!
Kevin 16 Jun, 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.
Richard Vanbergen 7 Jul, 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. ^^
Richard Vanbergen 7 Jul, 2008

ummm, oops no HTML allowed. sorry :P
Sean OBeara 17 Jul, 2008

excellent! i love finding these little trinkets!! im only learning the css and globe is the best place to be!! thanks a million!
Thomas 10 Dec, 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
sergio 9 Mar, 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.
Diego 29 Mar, 2009

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

Thanks!
Tomy 5 Apr, 2009

Hey nice Design,
i have a question:
Can I use this template in my projekt ?
thanks for answering
W 17 Apr, 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.
zh 22 Apr, 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!
Ray Cassidy 1 May, 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
Ahmed Elgendi 23 May, 2009

Fine tutorial! you could do the same horizontaly over the repeating pixels to save size.
regards
Ahmed
talha 12 Jun, 2009

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

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News