February 12th, 2007 - by Paul OB

There are many techniques available to give your square boxes that nice rounded look but I thought I’d concentrate this article on the basic techniques used to create this box.

We won’t be doing anything new or clever – just basic construction techniques that will produce a re-usable round box that you can then optimize and re-develop at your leisure. The first thing you need to know is that until css3 is fully supported then the only realistic way to do this at present is to use images.

When you’re done with this article you will have a re-usable, cross-browser supported, semantically correct, liquid round box! Sound like fun? Let’s begin!

Here are the images needed for this example:

As you can see there are six images needed rather than eight (4 corners + 4 sides = eight images) because the top and bottom borders have been included on the top and bottom left corners as a combined image. This saves two images and 2 extra elements on which to hang them. However the downside is that the horizontal top border image must cater for all monitor widths and therefore the image is quite wide to cater for this fact. This isn’t as bad as it may sound and the image file size is still relatively small and what we loseWeight Exercise on file size we can gain by making the browser not work so hard in redrawing the page as would happen with 1px x 1px repeated images.

We could, of course, have applied the same logic to our side corners and also included the side borders on two of the round corners as well. This would have reduced our total down to 4 images and is something you may want to experiment with yourself. Bear in mind though that the height of a web page is almost unlimited and you may run out of border if you use that method. Therefore for this demonstration we are using repeating images for the sides so that the box can extend forever.

The main wrapper

The first thing to do is to create a wrapper to hold all the corners and content and to provide the width for our box. This is simply accomplished with the following code:

  1. <div id="liquid-round"></div>
  1. #liquid-round {
  2. width:70%;
  3. margin:0px auto;
  4. background:#fff url(http://www.search-this.com/rounded/leftside.gif) repeat-y left top;
  5. }

The element is set to 70% width but can be whatever width you want or can be floated if your layout requires it. It is then centered with margin:0 auto (ignoring ie5.+ which will need text-align:center on a parent in order to center) and the left side image is attached to the background and repeated on the left y-axis to provide one of our full length sides.

Start at the top

Starting from the top we are going to need 2 elements onto which we can hang our left corner (with top border attached) and our right corner. This can easily be achieved by using a div with a nested span as follows

  1. <div class="top"><span></span></div>

The div will hold the left corner (and top border) and the span will hold the right corner. We can target the span by its unique position so we don’t need a class there at all. If you wanted to be minimalist you could replace the span with <b></b> as it is a pretty neutral element these days (semantically speaking) but a span seems more logical to me. The css is quite simple and is as follows:

  1. .top {
  2. width:100%;
  3. height:20px;
  4. background:url(http://www.search-this.com/rounded/top.gif) no-repeat left top;
  5. }
  6. .top span {
  7. display:block;
  8. position:relative;
  9. height:20px;
  10. background:url(http://www.search-this.com/rounded/top-right.gif) no-repeat right top;
  11. }

The width of the element named top is 100% and this means it will fill the parents width completely, although strictly speaking it is not really necessary to specify the width as the static element will expand to fill its parents width anyway. However for clarity I have left it in place but it can be safely removed. The inner nested element is a span which is an inline element by default and therefore we need to turn its characteristics into behaving like a block level element. We do this by declaring the span as display:block which makes it produce a block level box (it does not however turn the span into a block level element and the normal rules for inline elements in html must still be obeyed).

Declaring the span as block level makes it display as a block level box and it now expands to fill the parents width in the way that any other normal block element would. The div and the span both have a specified height of 20px and this is needed so that the round corners have enough height to display and will also keep the content at enough distance so that it doesn’t overlap our corners.

You could reduce the height and allow the content to dictate all the height but you may find that the corners and borders get obscured by your content so its best to allow some lee-way. It’s also good to specify a dimension on both of these elements in order to avoid IE’s “haslayout” issues which will often come back to haunt you.

So we now have our wrapper and our top two corners and top border. The left side border is also in place due to our wrapper element which holds that image as a repeating background.

The content

next we create a content wrapper which will hold all the content but it will also provide the right repeating side border and some positional adjustments.

  1. <div class="center-content">
  2. <!-- CONTENT BEGIN -->
  3.     <p>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</p>
  4.     <p>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</p>
  5. <!-- CONTENT END -->
  6. </div>
  1. .center-content {
  2. position:relative;
  3. background:url(http://www.search-this.com/rounded/rightside.gif) repeat-y right top;
  4. padding:1px 20px 1px 25px;
  5. margin:-1px 0 -50px 0;
  6. }

Nothing difficult here but you may be wondering about the bottom negative margin. If you look at the example box you will see that there is a nice fading shadow at the bottom of the box which we’ll create elements for in a minute. Obviously we are going to need to create some height so that all our shadow appears and fades nicely. This would leave us with quite a big gap at the bottom of the box where content could not enter. Therefore I have given the content a negative bottom margin which in effect drags the content over the footer shadow and makes the effect look much neater. The position:relative is needed to ensure that the content stays on top as IE will often draw negative margin portions underneath anything else rather than on top. Position:relative cures this.

There is also some side padding added to give breathing space for the corners and sides and to stop the content overlapping them.

The final stretch

Our box is almost complete now and we have the top two corners and top border in place and both our side corners are taken care of with the main wrapper and the content wrapper. All that’s left to do is to repeat the same technique we used for the top corners and apply it to the bottom.

  1. <div class="bottom"><span></span></div>
  1. .bottom {
  2. height:60px;
  3. background:url(http://www.search-this.com/rounded/bottom.gif) no-repeat left bottom;
  4. }
  5. .bottom span {
  6. display:block;
  7. position:relative;
  8. height:60px;
  9. background:url(http://www.search-this.com/rounded/bottom-right.gif) no-repeat right top;
  10. }

The code is virtually identical to the top section and needs little extra explanation and completes all the elements we need for the box. The two bottom corners are in place and also the bottom border which is attached to the left corner as already explained.

If you have floated content in this box then you may want to add clear:both to .bottom to ensure that the bottom section clears any floated content. You should now have a final structure that looks like this.

  1. <div id="liquid-round">
  2.     <div class="top"><span></span></div>
  3.     <div class="center-content">
  4.         <!-- CONTENT BEGIN -->
  6.         <!-- CONTENT END -->
  7.     </div>
  8.     <div class="bottom"><span></span></div>
  9. </div>

You now have a re-usable rounded box that can be safely used virtually anywhere you want. If you want to re-use the element on the same page then you will need to use a class instead of an ID for the main wrapper. You may also need to change dimensions and padding depending on situation but the basics are in place and it is very easy to re-use. Of course, as I mentioned above you may want to improve on this for individual applications and try to optimise the code used and reduce the number of elements required.

One way to reduce this by two elements is to add the side borders to the top-left and right-bottom corners but you will need to make the side borders a fixed length and big enough to cater for your specific needs. You can also reduce the number of elements further by utilising existing elements in your content. If for instance your box contains a heading then you can add one corner to the heading instead of using an empty div. You will more than likely have other content that you can use for another bottom corner such as a p tag and therefore save another empty div.

If you are creative you can reduce the number of non-semantic elements you need but the cost of this is usually in that the box becomes too specific and can’t be re-used unless all your other boxes have the same structure. However that may be ideal for your purpose and suit the task in hand.

As I stated at the start, we are not doing anything clever here but just a logical and straight forward approach that provides a solid re-usable structure. I often see examples of rounded corners where the corners have been placed by absolute positioning. This may sound like a good idea but unfortunately this does not work in IE because IE is always one pixel out when using the right position and the length is an odd number of pixels. In a fluid layout these means that the right corners would jog in and out at every odd pixel size as the screen is reduced or widened. The exact same problem happens when bottom is used and every odd pixel height will result in IE being one pixel out.

This makes absolute positioning out of the question for something so critical as round corners which must stay firmly in place.

There are many other methods about for creating round boxes but in effect they all do the same thing and that is they find elements on to which they can hang their images. If you google “rounded corners” you will find many other examples to play with now that you understand the concept.

242 Responses to “CSS Liquid Round Corners”

1 Paul OB

Alexandra there are quite a few tutorials about on transparent rounded corners and you will just have to find one that suits your specific requirements as they all differ slightly.

Here are a few links to keep you busy.




2 francky

Also @Alexandra:
The link to the mentioned article http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm is still working.
But the homepage and some other pages on my other site http://www.developerscorner.nl weren’t working. Link allright, but site hacked: just yesterday! ๐Ÿ™
My provider knows about, and is taking action.

3 Doug C.

Ha!! I searched for like hours looking for some nice CSS boxes for my Testimonials page and these work beautifully!

Of course I spent some time making my own graphics for the box, because I needed them on a white background, but that wasn’t hard to do.

My hats off to you guys. Thank you ๐Ÿ™‚

4 Bob

Very impressive technique; I hate to say it but I’m stealing your images too! They just happened to work well in the layout I’m working on.

5 Paul OB

Thanks bob – feel free to use the images ๐Ÿ™‚

6 leo

The span in the last div has a display set to block that keeps links in the last lines of content from working. When I delete the display the links work fine. Is there a solution to this?

thanks for sharing and teaching

7 Paul OB

Hi Leo,

The question has been asked a few times already (post 176) and the problem with unclickable links in the last line is due to the negative margins pulling content into the fade effect.

If you remove the negative margins and allow the fade to be under the content then the links will be clickable.

In most cases you would make an image with a smaller fade to avoid this problem.

Unfortunately IE needed the elements stacked this way to work so if you want to keep the fade and the negative margins then you need to nest an inner element inside the center content and give it a higher stacking context and remove the position:relative form the center-content.

Here is an example:

Hope that was what you meant.

8 francky

Maybe an alternative can be to draw an image for the right border and right bottom corner together (has to be rather high for a long page). Then you can arrange all div’s for the border and corner images before the content is starting. Now the content is “embedded” in the background (instead of a bottom div following on the content, which means the fading image has to be pushed up under the content). In this way no negative margin-top is needed, links are always clickable, and some padding-bottom for the last surrounding div can do the rest.
Example: http://developerscorner.nl/fading-liquid-corners.htm

“CSS: 1000 ways to get the same”

9 Paul OB

Yes that’s a good alternative Francky ๐Ÿ˜‰
Thanks for taking the time to put up a demo.

10 Juan Velandia

Thanks for the code, I’ll use it and I’ll show you the final result, thanks a lot!

11 diego rojas

simply excellent. easy, simple and functional.

12 CF

Great tutorial… it is very simple& easy to follow up!!! ๐Ÿ˜€

13 mill

Thanks for the quick response Paul. Unfortunately the site I have have been working on is internal. I am trying to Re-theme a Community Server (if you have heard of it. ) When that didnรขโ‚ฌโ„ขt work I just dummied up a page in DreamWeaver and tried it. Iรขโ‚ฌโ„ขd be glad to send you the files if that works.

14 PDI Admin

Thank you so much for posting this tutorial. It is exactly the sort of thing I was looking for! Works beautifully and the code is very clean / concise! I particularly like how the width can be dynamically sized … haven’t seen other rounded boxes function in this sort of way.

Thanks again!!

15 Diego Turriaga

To avoid the lower blank margin I modified bottom style (by the way I added a bit of padding space inside it):

.bottom {
margin-top: -20px;
margin-bottom: -20px;
padding: 10px 10px 15px 15px;
background:url(http://www.search-this.com/rounded/bottom.gif) no-repeat left bottom;

basically I added the negative margin-bottom property…

16 Seifer

Nice Tutorial ๐Ÿ˜€

17 andy

Great, i was using absolute positioning with an offset div inside of it. this is good!

18 Gift Baskets

Nice article however what would be extremely nice is if the original PSD’s were provided so that we may change colors of the background or use an alpha property. I am having a hell of a time creating new images that are working for this with a different color background. I use a picture gradient background so an alpha background on the edges of the images would be outstanding.


19 francky

Hi Wayne,
For a gradient background you’ll need a slightly different method, I guess.
See #193 and #194 above.

Good luck!

20 Paul OB

@Waybe: There’s a tutorial in post 11 if that’s of any use. Sorry but I don’t have the original files anymore as it was a few years ago.

21 Martijn

Anyone happen to got transparent versions of the images? Or maybe some with a similar design?

22 Paul OB
23 Martijn

Yeah basically just a .png transparent version of the borders. I’m having trouble getting it nice and smooth.

24 Paul OB

It can be tricky. The first method I linked to above using the 2 sprites is the best for fully fluid elements as there are no restrictions on size. It does need more markup though.

If the problem is that you can’t make the corners then there are online tools to help you. such as:

There are many more on google.

25 Martijn

The box itself is not a problem (the code) the one above worked great. And I really like the design of it but it only works on a EFF2F3 background and I got a white one.

26 Paul OB

Sorry Martijn I no longer have the original files for that image otherwise I’d run you up a set in a different colour.

The image isn’t that hard to make if you have the right tools and there are plenty of free paint packages that should do that for you.

Of course if you have Photoshop or Fireworks then you should see about making it yourself.

I believe there is a tutorial posted on one of the earlier posts above to show how to make rounded corner images in Photoshop.

27 Smykker Online

Thank you for this tutorial, this was exactly what i was looking for ๐Ÿ™‚

28 John Morris

I apologize if this has been answered already, there are so many comments on this article! I’m trying to get a hyperlink to work inside the content-center DIV but it won’t work. It appears as though it’s a hyperlink (blue color and underlined) but I can’t click on it to get to the required website page. The link works fine outside the rounded corner section but not inside.

I tried using Firefox and Chrome on Ubuntu.

Anyone have any ideas why this may be?

29 John Morris

I see that my previous question was in fact answered a few times in the comments. Thank-you. How hard would it be to have the shadow at the top as opposed to the current version at the bottom? Is it a matter of simply rotating the image files?

30 Paul OB

Hi John, You should be able to make cosmetic changes (e.g. changing shadows) by just changing the image without too much trouble.

The hyper link question was answered above as you already mentioned but here is another example anyway.


31 Mark Primavera

Great rounded corner!!
Although I followed the tutorial in how to make the images and it seems I cannot get rid of the center area that currently shows white?

32 Paul OB

@Mark – we’d need to see an example to help diagnose the problem.:)

33 DannyArcher

This is a true masterpiece tutorial. Thank you.

[…] rounded corner, I like CSS liquid round corners. In the demo, you will get multiple rounded corner panels. I am using following structure for […]

35 TonyB

Having a strange issue with IE7. I have 2 rounded corner divs side-by-side. The right-hand one renders perfectly. The left-hand one is missing top right and bottom right images. However, I can get the left-hand one to render correctly if I perform the following strange sequence of steps: (1) click on a different tab in the browser (2) navigate away from the browser to a different app (3) navigate back to the browser (4) click on the original tab with the rounded corners. Works every time! In every other browser on mac or windows it renders correctly first time.

36 Paul OB

Hi TonyB,

At a guess that sounds like a classic haslayout issue but I’d need to see the page to debug properly.

Disappearing and re-appearing elements is one of the signs that haslayout hasn’t been set where needed.

If you have a link or a demo I’ll take a look.

37 TonyB

Your suggestion about hasLayout led me to examine all my uses of the display property and I tracked it down to a problem with the jQuery slideDown/slideUp effect that I’m using (clicking on a link replaces the current rounded corner panel and contents with a new panel and contents using this slide effect). Changing it to a fadeIn/fadeOut effect (or removing it altogether) fixed it. Turns out others have had problems with the slide effect in IE7. I’m going to rethink how I’m doing this but thanks for your spectacularly prompt response and thanks so much for this very cool technique, it’s a thing of beauty!

[…] 2: CSS Liquid Round Corners […]

39 Using CSS3PIE in WordPress | Copperseed Creative

[…] mentioned and of course IE 9 itself. Without CSS3 styles, websites can become clunky in using nesting methods to get styling like rounded corners to work, requiring a variety of background images and bloated code, essentially lengthening website load […]

40 Rob

As soon as I add content, either the left or right border disappears. I am using I.E. and Chrome

41 Paul OB

Hi Rob,

I’d need to see the page to debug as it could be anything. It sounds as though you have something overlapping the border but without code or a link its just guessing I’m afraid.

Things have moved on since this article was written 5 years ago and most users are using CSS3 border-radius for ie9+ and just letting older browsers get square corners instead.

It saves an awful lot of work.

42 Web Design Code, Tutorials, & Tools « Eric's Logic

[…] Liquid Round Corners […]

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators

Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Other Sites