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 -->
  5.  
  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 BrainFuel » CSS Liquid Round Corners

[...] Mark Angeletti from Search-This has written a great tutorial for creating liquid rounded corners in CSS. There are a bunch of techniques for doing this, and this one is especially well written. [...]

2 Golgotha

Don’t forget to be a good neighbor and digg it: http://digg.com/design/CSS_Liquid_Round_Corners

3 mcangeli

You wouldn’t happen to have the source files for the corners would you? I’m having a devil of a time trying to make them in fireworks…

Mark

4 Golgotha

>> mcangeli,
Did you not notice the bullets at the top of the article? See them under, “Here are the images needed for this example:”

next just right click and save image…

5 mcangeli

Yea, thanks I got that. HOWEVER, I need them to match the color and background of my site, and that I cannot do with the gifs. Hence the reason of my asking for the source images.,.

But thanks.

6 ses5909

Nice one Paul.

7 Golgotha

>> mcangeli,
It’s a learning exercise – it’s not intended to be used as a template.

If you need a free graphics tool so you can make your own, I hear GIMP is pretty good.

8 Paul OB

There are some round corner generators about if you google for them. However its best to learn to make your own.

9 Alex

I used almost this EXACT method last year. It works very well, and isn’t hard to implement, but it does add a lot of markup to your structure.

One thing I’ve been wanting to try to find some way of taking advantage of the :before and :after attributes. I haven’t found any good way of doing this yet, but if I could it would really simplify the html side of things.

10 Paul OB

There is a demo here using :before and :after to good effect:

http://virtuelvis.com/gallery/css/rounded/

11 Mauricio Samy Silva

Inspired in comment 3 I’ve provided a tutorial explaining how to make the six images in Fireworks. Hope this help someone :-)
The tutorial is hosted at: http://www.maujor.com/fw/retangulo.php

12 Joesph

Anyone have photoshop images of the tutorial?

13 Skweekah

A link to an actual working example of this tutorial would have been a nice addition. If I missed it somewhere, accept my apologies but I’m having a hell of a time finding it if I have…

14 Skweekah

Sorry. Just found it. It is a teeny weeny link though! strong tags would have been nice! ;-)

15 Vikash

Guys,

This is great ! I finnaly found a good and visual appealing rounded box..

I will turn this in a ASP.NET webcontrol for re-use in websites…

Thanks again..

16 tech

i love it
thanks for the good info

17 Bill

For some reason I cannot get the leftside.gif image to display. All of the other images line up nicely, but that pesky left will not appear. Any help is appreciated.

18 Paul OB

Bill – Send me an email with the link and I’ll take a look (paul@pmob.co.uk)

19 Bill

Paul has been very gracious trying to help me solve an issue with liquid corners that I feel guilty monopolizing his time and patience. So I thought I’d throw this out and see if someone on this forum can give an admittedly novice coder a hand.

This page displays beautifully in firefox, safari and IE for mac. Alas, on a PC there is a line busting the box down near the right corner. I’ve checked to see if it’s due to an odd return etc., but can’t locate the trouble.

Good karma to the person with the answer.

Here’s the page: http://www.jgumbos.com/test2/test_400.html

20 Paul OB

Hi Bill,

On the right round box adjust the height of that right bottom div and span to 9px to match the image and then set the background position to top and not bottom. Then add overflow:hidden.

Do the same for the left round box but no need to adjust the height.

.bottom_left {
height:16px;
background:url(http://www.jgumbos.com/test2/images/bottom.gif) no-repeat left top;
overflow:hidden
}

.bottom_left span {
display:block;
position:relative;
height:16px;
background:url(http://www.jgumbos.com/test2/images/bottom-right.gif) no-repeat right top;
overflow:hidden
}

.bottom_right {
height:9px;
background:url(http://www.jgumbos.com/test2/images/col2_bottom.gif) no-repeat left top;
}

.bottom_right span {
display:block;
position:relative;
height:9px;
background:url(http://www.jgumbos.com/test2/images/col2_bottom-right.gif) no-repeat right top;
overflow:hidden;
}

That should fix it.

21 Bill

And indeed it has. Thanks, Paul. I really appreciate your patience and willingness to talk me through this.

[...] CSS Liquid Round Corners [...]

24 z01d

Paul, awsome solution, that is simple to follow and which actually works! And no Javascript! Thank you!

Question:
For .center-content wrapper you have:
padding:1px 20px 1px 25px;

Why the right and left paddings differ? This was causing overlap on the border of the inside div.

Once I set
padding:1px 20px 1px 25px;

…all is well.

25 z01d

Sorry, I meant:
padding:1px 20px 1px 20px;

Left and right paddings are equal to 20px.

26 Paul OB

Hi,

The bottom right corner image is 25px wide so I believe it should have been 25px padding each side rather than 20px on one side and 25px on the other. However it is only needed because I have pulled the bottom upwards with a negative margin to allow the text to overlap the bottom shading section.

If you don’t use the negative bottom margin then the text can go right to the side edges. Its only when the bottom is pulled upwards that you get an overlap of the right span image.

27 WBJ

Is there a way to add tabs to the top of the box to change the content displayed within the box? Thank you.

28 Paul OB

Hi,

You can just add any tabs you want to the top but if you want to switch the content without going to another page then you will need some javascript to do that.

However that isn’t advisable unless you are just showing small blocks of information otherwise you end up with a one page site.

I’ve added some old tab routine I had lying around to the top of the layout and didn’t have to do anything else to get it to work.

Javascript is not my area so you need to search for a much better script than this to toggle elements on and off unobtrusively and to set the current tab etc.

Anyway this should give you the rough idea.

http://www.pmob.co.uk/temp/liquid-round.htm

29 Austin

i love this rounded box and really want to use it, however i’m having some difficulties having it act the way i would like. i would like to use two of these boxes, side by side, as if they were in a table row. i’ve implemented the table, table-row, and table-cell into my css to do this and the boxes appear fine. however, the won’t go side by side, only on top of one another.

i was hoping to some help to have these boxes be side by side and have their fluid height effect one another, as in a HTML table. any ideas?

30 nc2dc

I tried this method and it works for the most part. However, I am experiencing a problem with how the rounded box behaves in IE7 versus Firefox. In Firefox, there seems to be an extra segment of the left and right side image. This leaves a much bigger gap between the content items and the top of the box. Does anyone know what I might be doing wrong. Any help would be greatly appreciated.

thanks

31 nc2dc

In troubleshooting the differences in how IE7 and Firefox handles this method, I stripped out all of the DIVs except the wrapper DIV liquid-round. IE7 displays the leftside.gif image just fine. Firefox does not display anything. Any ideas on why this happens? Thanks

32 WBJ

Hi again,

I have been trying out the source code for round corners with the tabs and I can only get it working and displaying as a plain square box. I have the images in the same folder as the html code. I am very new to this so maybe I missed something obvious, but I can’t figure it out. I wanted to create two round cornered tabbed boxes (4 tabs) one above the other with little bit of text for each tab. Thank-you.

33 WBJ

Sorry to bug you again..I got the main box to work it is just the tabs that aren’t rounded. Everything else is ok. Any help for the tabs would be appreciated. Thank you

34 Fabian

Hi there,

Thanks for this great advice on rounded corners!

Just one problem though, if I run TidyHTML on XHTML Strict compliancy it gives me 2 warnings.. that being

line 13 column 250 – Warning: trimming empty
line 268 column 178 – Warning: trimming empty

Your other recommendation using does the same thing.

Any thoughts on this perhaps?

35 Golgotha

@ALL: To all those needing personal CSS help I would like to direct your attention to the SitePoint CSS forum. Paul OB and Dan Schulz both hang out there and help people with their problems and all for free!

36 Molly

This is a great tut. although when using my own images i found one problem with the bottom right corner display. Not sure if this is actually an error since it works just grand for the sample here… but maybe someone else is having this issue? I just re-positioned the bottom right corner to “bottom” instead of “top”… which I thought made sense anyway.

CSS currently:
.bottom span {
display:block;
position:relative;
height:60px;
background:url(bottom-right.gif) no-repeat right top;
}

CSS could be:
.bottom span {
display:block;
position:relative;
height:60px;
background:url(bottom-right.gif) no-repeat right bottom;
}

the position of the bottom-right img should be positioned at the bottom.

woks like a charm! thank you for putting a lot of work into this. m.

37 Molly

I would link to mine but it isn’t online yet. Just in a workshop site.

38 Paul OB

Thanks for the comments and sorry if I haven’t replied individually but I’ve been away on holiday.

As Mark said above you can get help at sitepoint css forums if you have problems with your own implementations of the methods discussed in the article.

@Fabian – The w3c validator is fine with the code and I expect your htmlTidy is complaining about empty elements which are an evil necessity but are perfectly valid even if not semantic.

39 BerD

Hi great.

Is there also someone who knows how to get 3 boxes in 3 horizontal colums

BerD

40 Paul OB

Hi BerD,

If you are talking about the rounded corner box then you would just float the main parent.

e.g.

#liquid-round {
width:25%;
float:left;
}

However if you want more than one box then you would need to change it to classes.

e.g.
.liquid-round {
width:25%;
float:left;
}
and then change the html accordingly.

If you want fixed width columns then you can do something simpler like this example.

http://www.pmob.co.uk/temp/3col-rounded.htm

If you are just talking about any elements then you just need to use float to line things horizontally.

41 wbj

Hi Paul–I was wondering if you had the images that made up the tabs in your sample to me and if you would mind if I used them. I am not having much luck creating my own to match. This tabbed box has worked out really well..Thank you.

42 Paul OB

Hi wbj,

You can just grab the images from the demo.

If you are talking about the one with the tabs then just view source and look at the css references to the image to find the path and then just type that address into the address bar.

Then right click and save locally.

Here they are anyway.

http://www.pmob.co.uk/temp/images/tableftB.gif
http://www.pmob.co.uk/temp/images/tabrightB.gif

Just follow the link and then right click and save.

If you want all the other images then just do the same.

Feel free to use any images used in that demo.

43 Oren

I tried this tut , but in IE7, you can’t use float div’s inside the center-content, it ruins the bottom corners.

44 Oren

I added width to bottom to solve the inner floating div’s (comment 43)

#bottom {
display:block;
width:100%;
height:32px;
background:url(../images/parts/bottom.gif) no-repeat left bottom;
}

45 wbj

Hi Paul I posted here because I am using your rounded box (no tabs) on a web page under the rounded tab box and only wanted to post code for a portion I am working on. I can’t get the text to wrap properly around a logo image in side the box. Thank you. Here is what I have:

#sleeplogo {
float:left;
padding-right:7px;
padding-bottom:7px;
}

We are here to inform the general dental and medical communities of the advanced benefits of oral appliance therapy for sleep apnea. More text to follow…..

class=”bottom”>

46 wbj

cut off from previous post –

We are here to inform the general dental and medical communities of the advanced benefits of
oral appliance therapy for sleep apnea. More text to follow…..

47 Paul OB

Hi wbj,

There should be no problem in getting text to wrap a floated image as long as the image is first in the html. We’d need to see a little bit more code to see what’s going on.

48 Mary Hanns

Sorry I think I found a little odd thing. In the text of below, you cannot select the text, that which becomes a little unpleasant. And when u resize the window sometimes hides little bit of the text of bottom right to the text and I can’t fix the trouble whit z-index because I’m new on this.

49 Paul OB

Hi Mary,

Try giving the content in the center box a z-index as follows.:

.center-content p { position:relative;z-index:999;}

You may need to increase the right padding in center-content if the corner images are obscuring your text.

50 Dave

Hi All,

I have the challenge of nesting a rounded corner set within another.

First attempt at just nesting one inside the center-content div produced bad results.

Then I tried to surround the nested set with a Div tag, hoping that would shield it from any issues, but that didn’t work.

As a Test, I nested a Table, then placed the nested rounded corner set within that table and all seemed fine (The table shielded the nested rounded corner set from any issues).

So I figured instead of using a table, I’d just surround the nested rounded corner set with a Div tag as my earlier test, and set Display: Table.

That almost worked, the right border disappears in IE7, but is fine in Firefox.

I’d prefer to not use a Table in this, but I wonder if that’s my only option when nesting these.

Has anyone successfully nested these within each other, or have any advice?

Thanks
-Dave

51 ws

Thank you!!!! This works great. Not being an image guru, by providing the images for us, you gave me the first easy solution I found that I could implement and have it actually work in IE.

I do have a general question that is kind of outside this forum but someone may be able to provide assistance. Is there a good support forum for images or GIMP? When you apply these images to anything but a white background, the images have square corners and a white border. I’d like to get rid of these so I can change the image color to match the background of my site. Any suggestions?

52 ws

I have my images set and working along with the background. However, whenever I load/refresh the webpage the site renders with squared corners and then the rounded corners load. Has anyone else experienced this issue?

53 Paul OB

Hi WS,

Obviously when you refresh the page then the images have to reload and have to be redrawn. This is the same for any images and you will always see them being redrawn. This should not be an issue as the first time you visit a site the images will be cached for further use.

You should of course take care that the images are the smallest file size possible and the delay will be less noticeable.

Regarding transparency of the images then things become a little difficult because IE6 and under do not handle transparent pngs properly. You can use transparent pngs for firefox and ie7 but for ie6 you would need to use the alpha image loader and things soon get quite complicated.

Three are some javascript fixes:

http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

There are limitations and complications with the alpha image loader so beware.

@Dave

You should simply be able to nest the rounded boxes without doing anything much at all. Just change the id’s to classes and ensure that there is enough padding around the edges to protect the images.

e.g.

http://www.pmob.co.uk/temp/liquid-round-multi.htm

However you will need to make new images so that the nested images mimic the background they are on.

54 ws

This worked well when I used a fixed width on my 3 column layout. However, when I changed my layout to float the 3 columns (with no change to the liquid-round code), the bottom image does not display. The side images copy down until the content stops. Any ideas?

55 Paul OB

@ws – Sounds like you haven’t cleared a float somewhere but I’d need to see the code to be sure.

56 Lina

Thanks a heap! I’ve been trying so many different ways to get this working without using absolutely positioned corners. It’s a shame that it requires so much markup – I can’t wait until the time comes when we’ll actually be able to use :before and :after! – but your technique is probably one of the tidiest and easiest to reuse that I’ve seen so far.

57 Jeff S

This is a great tutorial! I’ll use it for my design, but my problem is is that in Firefox 2.0.0.6 it is not loading the top left and top right images properly as they do in IE properly. Please advise!

58 Paul OB

Hi Jeff,

Well as you can see from the example in the article it does work in Firefox without problem so it must be something in your code that is causing the problem.

Do you have a link to the page that’s giving you a problem and I’ll have a look?

59 WS

I enterred a clear command and it worked just fine. Thanks.

60 WS

Can’t get rightside image to repeat when nesting the rounded corners. I created an outer wrapper and an inner wrapper (wrapperi). The inner wrapper will load top, left and bottom but not the rightside. The image loads but does not repeat down to meet the bottom image. Here’s my code. Can anyone see what the issue is?

.wrapperi{
width: 760px;
margin:0px auto;
background:#fff url(../images/iwleft.gif) repeat-y left top;
}
.topi {
width:100%;
height:10px;
background:url(../images/iwtop.gif) no-repeat left top;
}
.topi span {
display:block;
position:relative;
height:10px;
background:url(../images/iwtopr.gif) no-repeat right top;
}
.center-contenti {
position:relative;
background:url(../images/iwright.gif) repeat-y right top;
padding:1px 10px 1px 10px;
margin:0px auto;
}
.bottomi {
height:40px;
background:url(../images/iwbottom.gif) no-repeat left bottom;
}
.bottomi span {
display:block;
position:relative;
height:40px;
background:url(../images/iwbottomr.gif) no-repeat right bottom;
}

Thanks for any assistance.

61 Paul OB

Hi Ws,

Have you allowed enough side padding on the center content to allow the image to repeat?

Have a look at my post 53 above where I show a nested example that uses the same code on the inner elements without needing new classes.

http://www.pmob.co.uk/temp/liquid-round-multi.htm

62 WS

Hi Paul,

I think so. My outer wrapper and inner wrapper have the same padding set for the center-content. Really the only thing I did was change the width from 780px (outer) to 760px (inner) and used different image colors. The image is 10px wide.

Could there be something else in my code pushing it out?

Thanks.

63 Paul OB

Do you have some real content inside or have you placed a float there? If you have floated content then you need to clear it before the parent will extend around it.

Can you pt an example up online somewhere and I will take a look?

64 WS

Sorry. I had the clear after a div tag which, because of the color of my outer wrap images, made it look like it worked. I moved it to before and all the images loaded just like your example above. Thanks for your help and patience.

65 g47o

hoo, muchas gracias :D

66 WS

All looks great in Firefox, but testing in IE7 (I assume older versions of IE will have problem as well), the right image loads part way (approx 15-20px) until it reaches my text. I’ve tried adjusting the padding and margin settings for the right side, but it doesn’t seem to make a difference. Any ideas?

67 Paul OB

Hi WS,

If you look at the example posted in the article it works all the way from IE5 – IE7 without problem so the issues you are having will be related to the specific code you are using.

It sounds like the usual “haslayout” issue but could be any number of other things also. We would need to see your code to be able to debug this as “haslayout” fixes have to be specific and I can’t do that without seeing an example.:)

68 WS

Hi Paul-I just sent the files to you.

69 Paul OB

Hi WS,

You’ll need to zip up your images and sent them to me as well because I won’t be able to tell if its working or not unless i have the images you are using.

Also, I don’t want PHP code. Just run the page and then view source from the browser and just give me the html that is output from there. I don’t want any server side code in it.

meanwhile you can try adding some “haslayout” fixes but this might be overkill.

/* mac hide \*/
* html .center-content1,
* html .center-contentf,
* html .center-contenti,
* html .center-content ,
* html .center-content {height:1%}
/* end hide */

70 Paul OB

Hi WS,

I looked at the files you sent and the fixes I gave you above will fix most of the issues. I’m also wondering why you just didn’t send me the url and then I could have seen for myself ages ago :)

The only other fix you need is to add overflow:hidden to the span as follows.

.topi span {
display:block;
position:relative;
height:10px;
background:url(images/iwtopr.gif) no-repeat right top;
overflow:hidden;
}

/* mac hide \*/
* html .center-contenti,
* html .center-content,
* html .center-content1,
* html .center-contentf,
* html .inside {height:1%}
/* end hide */

You are also using transparent pngs that IE6 and under don’t understand so either use a transparent gif (ie6 only handles full transparency or no transparency, it doesn’t handle partial transparency as in pngs) or use the IE alpha image loader to display png images.

71 WS

Paul,

Thanks. The images are loading fine in IE7 and Firefox. The url would have made things too easy:). No, seriously I just uploaded this version of the site there on Friday and was uploading changes over the weekend so I wanted to give you a clean copy to work off of.

Again, thanks for all your help.

72 Adeel

I am having a problem where if I add a anchor tag in the center-content, its not clickable. It seems like the negative margin is somehow causing that coz if I take the negative margin out it works. Obviously I dont wanna do that coz that messes up the layout but how can I make this anchor tag work within this center-content area.
Any ideas?
Great tutorial though

73 Paul OB

Hi Adeel,

Sounds like a z-index issue. Try adding a z-index here:

.center-content{position:relative;z-index:999}

If that’s not the problem then we will need a link to have a look and see what the problem is.

74 Adeel

Thanks for your reply and it does makes the link clickable but the box layout gets all messed up from the right.
This is what I am trying to do


The below link will show up but you cant click on it. This happens if u have an anchor tag, submit button or a submit image. Changing the negative margin in the CSS solves this problem but that leaves a huge padding in the bottom of the box
Test Link

75 Adeel

Thanks for your reply and it does makes the link clickable but the box layout gets all messed up from the right.
This is what I am trying to do


The below link will show up but you cant click on it. This happens if u have an anchor tag, submit button or a submit image. Changing the negative margin in the CSS solves this problem but that leaves a huge padding in the bottom of the box
Test Link

76 Adeel

SORRY PLZ IGNORE THE ABOVE POSTS.
I was trying to post the html. Here I got it setup to show the problem I mentioned. Both link and the button are not clickable.
http://mankatomoose.org/temp/cssbox/

77 Paul OB

Hi,

You will need to to remove the position relative form the center content and apply it to the inner elements instead.

e.g.

.center-content {
background:url(http://mankatomoose.org/temp/cssbox/images/rightside.gif) repeat-y right top;
padding:1px 20px 1px 30px;
margin:-1px 0 -50px 0;
}
.center-content p{position:relative;z-index:999;}

78 Adeel

Thankyou for your help. It works great now. :)

79 David

Paul I have tried your demonstation and all is fine but if I only put one line of text in the box then the box screws up on the top edge. If I make the negative margin -20 however all is fine but doesn’t really work as you wanted it to with several lines of text as it doesn’t go onto the shadow part of the box. Can you explain what’s happening here. Using IE6 BTW

80 Paul OB

Hi David,

The problem in the example is that the bottom shadow is actually 60px high (blame Mark for that design quirk :)) and therefore the element really needs to be kept at a minimum height in order to accommodate this.

You would need to set a minimum height and I have updated the example below to show this.

http://www.pmob.co.uk/temp/liquid-round.htm

.center-content{min-height:40px}
/* mac hide \*/
* html .center-content{height:40px;}
/* end hide */

The text is pulled into the shadow area at the bottom by using negative margins but it did assume that there would be enough content there to allow this to happen. With the minimum height set you can have one line of text but that’s about as close as we can get to the bottom without changing it all around.

Most designs won’t use such a big shadow at the bottom and if you just have 5px or 10px corners then there is no need for the negative margin at all.

81 Paul Davis

This may sound like heresy but I ran into one and only one issue with the boxes, under IE6 (don’t get me started about it :) if you have a table of data you lose the right side image (the bar), it seems to work everywhere but IE6. I would ignore it but there are still a ton of IE6 users out there, we have some situations where we are going to need to use tables to display tabluature type data (hence using them for what they where designed for)…

Any ideas?

I can post some simple code if you would like, but all you have to do is add a table and view it in IE6.

Thanks

-Paul-

82 Paul OB

Hi Paul,

If we are talking about the same thing then I gave the answer in #post 77.

Here’s an example with a table that seems ok in IE.

http://www.pmob.co.uk/temp/liquid-round2.htm

If that’s not the issue then let me have a demo :)

83 Paul Davis

Ok this is a REALLY bad example, but here goes…

I attempted to add a header into the box, you will see that the top is a 29px top and the bottom parts are 16px. In this one we used a table to do the login forms (I know there are better ways but this was fast). Somewhere in pulling it from the normal site to here I broke something, I’m too tired now to figure it out but tomorrow I’ll deconstruct. Anyway the issue is that I tried your fix but didn’t get it to work, I’m sure it’s something obvious I’m missing.

Here’s the URL: http://patriotguitars.com/test/default.htm

Be Kind :)

Thanks

-Paul-

84 Paul Davis

Oh and if you try this in Firefox or Safari it works (except for the right edge part I seem to have broken)…

Thanks

-Paul-

85 Paul OB

Hi,

The right border is missing because you have incorrect code for the background image.

background-image:url(boxrtsideLogin.PNG) repeat-y right top;

Backgound image can only contain the url to the image and not also the repeat and position properties. You need the background shorthand instead.

background:url(boxrtsideLogin.PNG) repeat-y right top;

IE is out because you have placed an image and then tried to move it with negative margins but this won’t work in IE because it will stretch the container if you try negative margins when the element has a width which forces “HasLayout”.

You should simply have put the image in the background anyway.

You have moved things up and down but not taken into consideration the default margins and padding that are in place for those elements.

You also have invalid nestings where you can’t nest block level elements inside a span.

There is also invalid and deprecated mark up in the code that needs to be removed.

There is no such thing as negative padding or cellspacing.

You could use the form container instead of one of the other divs and save 2 lines of code.

Apart from that …………… :)

I have done this very quickly but using normal and correct code it all seem to display correctly for me without problem in all my browsers.

http://www.pmob.co.uk/temp/paul-davis.htm

Be aware that I have linked to your images so if you have moved those images then the above link won’t look correct.

86 Paul Davis

Schooled and spanked! :)

It’s all a learning exercise for me, I am humbled by your generosity…

In my defense somehow the background-image: Got changed when I moved it over, I just checked the original and it was fine (figures). But the other stuff is all my fault…

I’m now going to study your example and take those lessons to heart, the good thing is I’m learning from this.

Thank You!!!

-Paul-

87 Paul Davis

I have a couple of questions if you don’t mind…

First off, I got all the changes in and they work like a charm.

When your positioning things like text in the header is it better to use padding to position it or should I use top and left?

One other request that we had was that on one page we want to make the box stretch to a certain height (designers are that way), should I just make a div box too that height and tell the liquid box to do 100% on the height?

We could just use an image, but basically we liked your way so much we made a bunch of different boxes out of them and are using them like a toolkit, so I’d like to stick with that :)

Again thank you for the help.

-Paul-

88 Paul OB

>>should I use top and left?

Relative positioning is very rarely needed as it produces more subtle effects. An element moved with relative positioning is moved only visually and not physically. It always occupies the same space it originally did but just appears to be somewhere else.

Most times simple padding will do what you wanted as long as box model issues are well controlled.

If you use a height then you can set a specific height but make sure you do it in ems otherwise when the text is resized the layout will break. You can set inner elements to 100% height when the parent has a fixed height. You can’t set 100% height on an element that is auto height (or content height).

>>(designers are that way)

Yes they have no concept that a web page is a living thing unlike a piece of paper :).

Ultimately, in the end you have no control over what your user may be viewing with or what they have set the defaults to be. With user stylesheets and browser settings they can set the environment the way they want and it is our job not to get in the way.

89 David Winchester

Great work – Finally a rounded box that exposes all the correct methods.

90 Anthony Romero

First off, great tutorial! I love the look of the box and there was a lot of artistic flair put into its design, so kudos there!

Unfortunately, I’m sadly having a bit of a problem with placing images inside the box with an alignment attached to them. If they are given no alignment, then everything is fine; however, if they are given any sort of alignment and appear near the end of the text, the image will burst through the bottom giving a odd looking result such as this:

http://img150.imageshack.us/img150/7861/dvdboxhs4.jpg

Any idea what I might have done wrong to cause this?

Thanks for your time.

91 Paul OB

Hi Anthony,

What do you mean by alignment?

If you are using align=”left” in the html etc then don’t! :) It’s dpercated in strict anyway and you should be controlling things from the css anyway.

If you mean you are floating the images then it looks like you just need to “clear” them or they float out of the container.

Floats are removed from the flow and will not be contained by a parent unless you use some sort of clearing mechanism.

See my other article “Lets be Clear about this” if you don’t understand the concept.

If its neither of those issues then I’d need to see the page and have a look see :)

92 Anthony Romero

Hey Paul,

Sorry for not being clear, I am floating the image with this: {float:right; padding: 5px;}.

I have tried clear:both clear:none clear:inherit yet none of them seemed to fix the problem. :-/

93 Paul OB

Hi Anthony,

Where are you applying the clear to?

It needs to be clear:both and its applied to an element that is after the float but before the closing div of the parent.

You may need to supply us with a link so we can see what’s happening.

Read the article I mentioned in my other post if you are not clear about clear :) (It doesn’t sound as though you are up to speed on this yet because you mention using clear:inherit which makes no sense at all in this context. ;))

94 Sam Crockett

Paul,

I know your probably a busy man, but if I would greatly appreciate any assistance.

I have used your liquid corners example, with a few adjustments for, for a semester project web site I have created for my web design class. It works great in every browser but IE 6 and 7. And I know your example worked in those, so it’s probably me screwing up some where, but I’ve tried everything I can think of.

Here is the site: http://samismy.name/gaggletest/index.html

I have played around with the boxes and most of them work in IE now except for the ones in my sidebar, and the bottom box on some pages. The bottom and side images seem to be getting pushed to the side or pushed down resulting in them not lining up.

If you can help me, or refer me to a place that can get help I would be grateful. Thanks for your time.

95 Paul OB

Hi,

The right column corners seem to be pushed out by the list that is inside.

Try adjusting the margins and padding like this:

#sidebar ul{
margin:0;
padding:0 0 0 1em;
}

The corners are all missing in IE7 because you need a width on the main float.

.rccontainer{width:100%;}

Hope that helps:)

96 Sam Crockett

Paul,

Thanks! All the boxes work in IE 7 now.

But for some reason the the bottom box on the about page and the right side image of the boxes in the sidebar still aren’t lining up. I have played around with the margin and padding and nothing seems to be fixing the boxes. And I have looked through the other margin and padding properties near it and can’t find anything.

Referring to the bottom box on the about page, I was experimenting with it and found that if you just add empty white space below the box the bottom image lines up. So some margin or padding must be pushing the bottom image around.

Though it all works in IE 7 now and thats what I will be graded on, I still wish I could figure out how to get it working in IE 6.

Thanks for your help!

97 Paul OB

Its the same problem I just told you about :). Your list is too wide and has too much padding and margin(see a previos aricle on here called “No margin for error”).

Try this code:

#links ul
{
list-style-type:none;
margin:0 0 30px 0;
padding:0;
}

#links li
{
border:2px solid gray;
border-width:1px 0;
margin:5px 0;
width:90px
}

#links li a
{
color:#111;
display:block;
font:bold 120% Arial, Helvetica, sans-serif;
padding:5px;
text-decoration:none;
}

* html #links li a
{
/* make hover effect work in IE */
height:1px
}

98 Sam Crockett

Paul,

I found out it wasn’t just the margins, it was my own stupidity. Some where in my CSS below the /* Sidebar */ section there was something adjusting the margins (still trying to find exactly where it is). Once I moved your suggested code to the bottom of the CSS it all works beautifully.

Once again thanks for taking the time to help me out.

Oh, and thanks for referring the “No Margin for Error” article. That will definitely help me in the future.

99 Paul OB

Yes you had set ul and ol globally to have great big padding but you didn’t reset them to zero for the sidebar.

ULs have a default left padding and also a default left margins and you need to control both or you end up with double the amount you want.

You also set the width which combined with the padding made the element much too big.

Always makes sure things fit in the space you allocate otherwise things will break :)

100 vasiliy dyakov

Round corners via :before and :after
http://www.noinimod.ru/data/weblog/post/3/example/example_en.html
This example works in all browsers. In ie6 and ie7 too.

101 Kris D

To challenge myself, I tried to flip the design so the shadow was on top. I flipped the graphics first, then put then where I *thought* they should be but obviously I am not understanding something. I can get bottom-right to be on top which leaves me with a broken left side. The only way to get the left side to show is to remove the tag, which takes away the whole top row.

What am I not getting?

TIA

102 Paul OB

Hi Kris,

Have you got a link and I’ll take a look? It’s too hard to guess without seeing the code etc :).

103 It’s Been Covered…

[...] Do you know what the most popular article ever on Search-This has been? It was Paul’s article CSS Liquid Round Corners. When I asked Paul to write the article he was hesitant at first because so many others had already [...]

104 dismet

What a shame i missed this tutorial here :)

105 Muten

just felt like i had to say thanks for helpin out here ^^

106 CSSgallery.info » Rounded cornes - CSS

[...] CSS Liquid Round Corners [...]

107 Simple Round Corners in CSS (revisited)

[...] a previous article we learned how to apply some nice shadowed corners and sides to a fluid width box and I thought it [...]

108 Thomas

Is it somehow possible to have the rounded corners appear on a transparent background instead of the gray one used here? I’ve tried changing the background graphic to an transparent alpha channel but that doesn’t work because the button and top borders shine throught. Any ideas?

109 Paul OB

Hi Thomas,

It gets a little awkward when you start adding transparent corners for the reasons you mentioned.

However there is a method in a more recent article that should help you do this.

http://www.search-this.com/2008/01/24/simple-round-corners-in-css-revisited/

110 Rounded Corners Techniques - DesignersTalk

[...] to add to the list… CSS Liquid Round Corners [...]

111 abrownleo

Hi Paul,
Great tutorial. I have been looking for something like this for a while. I have followed your instructions step by step but am finding that my leftside.gif image is sitting on the top and not repeating itself down the side where it is supposed to go. Is probably something I have missed out, but thought I would ask anyway. Keep up the good work!

112 Paul OB

@abrownleo: Sounds like something simple but I’d need to see a link to troubleshoot. It could be a float clearing issue or a position:relative issue but I’d need to see the code :)

Post a link if possible and I’ll take a look,

113 abrownleo

Hi Paul,

I ended up figuring it out. Thanks for your help and great tutorial anyway. I will be investing in a copy of your CSS book for my reference.

Thanks Again
Andrea
abrownleo
Sydney, Australia

114 Ryan

Hi Paul,
This is a great tutorial, but I’m having a similar problem to abrownleo. Since she figured it out herself, there was no answer.

Everything works great in IE, but in Firefox, the left side is missing for some reason and I can’t figure out why. Any ideas?

Thanks much for your help. It is greatly appreciated.
Ryan

115 Ryan

Follow up to my previous post to clarify. I have not modified your instructions in any way shape or form (save for the URL). So what you have specified above is hot it appears in my CSS and HTML files.

Thanks!
Ryan

116 Paul OB

Hi Ryan,

Can you give me a link to the problem page as it could be something else in your page that conflicts.

Usually it’s IE that will hide elements but I’m guessing that you have a float that hasn’t been cleared and therefore the height of the container will be zero.

Download Firebug for Firefox and then inspect the elements and you should find the culprit straight away.

Alternatively find the name of the element that has the missing image and then before the closing tag of that element enter the following code as a test.

117 Paul OB

Whoops the system stripped the code I posted which was just an empty div pair with style=”clear:both” added.

118 Ryan

Thanks Paul. I downloaded Firebug (neat tool, by the way), but I still can’t fix the problem.

I have to say that I think I see WHY the left image doesn’t show up, but I just can’t fix up.

When in Firebug, I notice that the entire element that contains the left image doens’t appear in Firebug’s screen. Below is what I have in my CSS that I don’t see in Firebug.

#liquid-round {
width:100%;
margin:0px auto;
background:#fff url(http://www.guide-to-retirement-plans.com/images/leftside.gif) repeat-y left top;

Any thoughts? You can see one of my problem pages at http://www.guide-to-retirement-plans.com/

Thanks again for any assistance you might be able to provide.

Ryan

119 Paul OB

Hi,

The problem is that your css files are littered with errors.:)

You have literally tens of extra closing brackets all through the files.

div.clear {
font-size: 1px; height: 1px}

}

/***New text box***/

#liquid-round {
width:100%;
margin:0px auto;
background:#fff url(http://www.guide-to-retirement-plans.com/images/leftside.gif) repeat-y left top;
}

After the div.clear and above the “New Text box” comments you have an extra bracket that will stop good browsers from making sense of the next style as the bracket becomes part of that rule.

Removing all those extra brackets that are littered all throughout the code will fix the issue.

That isn’t the only error and your first line of code in main.css is invalid as you cannot put html tags in css files and is corrupting your body styles.

CSS files can only contain CSS and CSS comments. You can’t have html comments or any other code. If its not CSS or its not a CSS comment then it can’t be in the file.

Therefore validate your CSS file and clean up all those errors as even one stray bracket can have catastrophic effects.

I also notice that your html is need of a clean up also as you can’t put list tags inside p tags. List elements should be contained within a parent UL and not a P element. P elements can only contain inline content such as spans etc.

You have also wrapped some DIVS in P elements also which is not allowed and will cause problems.

Validate your CSS and HTML and a lot of your problems will go away :)

http://jigsaw.w3.org/css-validator/#validate_by_uri
http://validator.w3.org/

Hope that helps :)

120 Ryan

Well, there you have it. Living proof that HTML and CSS are dangerous in the hands of an amateur!

Of course, you were right. I fixed all the errors and it took care of this problem along with a handful of others.

Thanks so much for your gernerosity with your time to look over this mess for me. I greatly appreciate all of your help!

Ryan

121 Nick

I used your tutorial, which was very easy to follow, and ran into a problem.

When I put a form object, such as a drop down box in the content area, it does not allow me to click on it in Safari. I had the problem in Firefox as well but figured out putting the overflow:hidden on the bottom class and it fixed the problem in Firefox and IE.

Is there something I’m missing?

////CSS
.orange-round {
width:inherit;
margin:0px auto;
background:#F90 url(/images/layout/box/orange/left.gif) repeat-y left top;
}
.box_top {
width:100%;
height:23px;
background:url(/images/layout/box/orange/top.gif) no-repeat left top;
}
.box_top span {
display:block;
position:relative;
height:23px;
background:url(/images/layout/box/orange/top-right.gif) no-repeat right top;
}
.box_center-content {
position:relative;
background:url(/images/layout/box/orange/right.gif) repeat-y right top;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}
.box_bottom {
width:100%;
height:74px;
background:url(/images/layout/box/orange/bottom.gif) no-repeat left bottom;
overflow:hidden;
}
.box_bottom span {
display:block;
position:relative;
height:74px;
background:url(/images/layout/box/orange/bottom-right.gif) no-repeat right top;
}

///HTML


Get Started

— Select a State –
…..

122 Paul OB

Hi Nick,

Have you tried manipulating the z-index on the element. Add position:relative to the element concerned and apply a higher z-index.

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

123 Dan Ferris

Paul,

I just finished reading through the tutorial and tried setting it up for myself. It worked on a small box with little height but when I attempted to use two boxes on top of each other there was a problem. The left side border is not showing on either side for some reason, I am not really sure. I changed the wrappers to classes like you said earlier and that made all of the corners nice and flush. All I need now is for the left border to show up and this will be finished. I’m sure it’s just something small I overlooked, I too am a self-admitted novice with the in depth CSS scene. Any help would be great.

Heres a link to my test site i’m still constructing:
http://cs.txstate.edu/~df1106/DSI/index.htm

Thanks for the great rounded boxes!

124 Paul OB

Hi Dan,

Sorry for the late reply as I’ve been away on holiday. If you still need help then you will need to post again and I’ll take a look as soon as I have some spare time.

125 Brad

You legend. I’ve just been surfing for ages to find this. BUT – What on earth is going on over there at Microsoft?! Why can’t a company of that stature build a proper browser. It was all looking great in FF and then the usual… ‘better check it in IE’ and sure enough! I’m getting a big fat chunky gap! grrrr!
http://beyondchalk.com/corner-test.html

126 Paul OB

Hi Brad,

Try forcing “haslayout” on the center-content like this.

.center-content{min-height:0}
* html .center-content{height:1%}

You will have to check that it doesn’t cause problems elsewhere but it should do the trick.

127 Terry

I’ve put this great tutorial to use on a page.
It’s great except when I use a *link* inside the box in IE7.
I’ve used the above mentioned:
.center-content p {position:relative;z-index:999;} and made sure the content had the p tag.
But the link (to more…) is just not “clickable” for me.
See:
http://gawp.org/new/index.php
the link to “more…” in the opening box.
Any clues? Thanks in advance for your help to this newbie.

128 Paul OB

Hi Terry,

That looks like a bug in IE where the link is over the negative bottom margin portion of that layout.

One solution would be to reduce the bottom negative margin so that the link is clear.

e.g.

.thrColAbsHdr .center-content{margin:-1px 0 -20px 0;}

Alternatively you could try removing the position:relative from the center-content.

.thrColAbsHdr .center-content {
background:url(images/rightside.gif) repeat-y right top;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}

There may be side effects in removing the position:relative so check carefully.

I also notice you have “haslayout” issues and the left column jogs to the right in IE when a link is hovered.

Try this haslayout fix.

* html .thrColAbsHdr #mainContent{height:1%}

Paul

129 Brad

Thanks Paul! I’ll take a look over the next day or so and let you know how I go.

130 Terry

Thank you! Changing the neg margin didn’t help, but removing position:relative did.
Haven’t noticed anything odd.
I didn’t see the “haslayout” bug but I included the fix for that too. Thanks for the help!!!

131 Brad

Hi Paul,

No luck yet. Could you tell where exactly I should be placing the

.center-content{height:1%}

I entered the css ok, but made no difference…yet.

132 Paul OB

Hi Brad,

Can you put up your test page again with the changes you made and I’ll take another look.

Paul

133 Paul Davis

Quick question about the layout of these, we are using them on our new site design and love them.

Is there a way to force a box to expand to the full height of a containing div?, width is covered but height seems to be an issue. I’ve run into a case where the designers are lining things up and would like the boxes to expand to fill the containing divs even if the content does not go the bottom. I could do it by setting a height in pixels in the content div but would rather have it based on the container…

Thanks

-Paul-

134 Paul OB

Hi Paul,

If the boxes are a fixed width then you could use repeating slices as in this simple demo.

http://www.pmob.co.uk/temp/3col-rounded.htm

However if they are a fluid width then things get really difficult. If you don’t have in-page links you could try adding Alex Robinsons method to the elements concerned but it may be complicated with the nested divs in the way.

http://www.positioniseverything.net/articles/onetruelayout/

Or you could try my equal column method but things could start to get really complicated quite quickly.

http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/

Probably the easiest solution is to use a min-height (height for ie6)

Sorry I don’t think there’s an easy answer but it is possible if you have a lot of time to spare :)

135 Vuppu

Excellent info and very nice graphics as well. Thanks for this clear and easy tutorial.

136 Paul Davis

Paul…

Back again with a new question, we have been using these for a while now with great results. Now they want to use them for pop-ups, meaning that the corners need to be transparent. Since the top image is so long and overwritten by the corner the top image shows through.

Any thoughts on how to get a clean transparent corner?

Thanks

-Paul-

137 Paul OB

Hi Paul,

Transparent corners need a different approach because they need to be outside the main container or the background shows through in the transparent corner position. This makes them a little awkward to use.

Three is a newer article which shows one way of doing this and it might be better if you have a look here first.

http://www.search-this.com/2008/01/24/simple-round-corners-in-css-revisited/

Hope that’s of some use.

138 Jarod

Great tutorial. Easy to follow and works great! I have a quick question. I’m trying to utilize this technique with 1 rounded rectangle enclosed within another rounded rectangle. Everything looks great on Firefox, Safari, Opera, and IE7. Unfortunately the inner box breaks apart in IE6. In IE6 both rounded rectangles work properly seperately, just when I put the one box within the “Content” section of the other, it breaks apart. Any suggestions??

Thank you so much for any help.

-Jarod

139 Paul OB

Hi Jarod,

In my posts 51 and 63 I show an example of nested rounded boxes in answer to someone else’s question.

http://www.pmob.co.uk/temp/liquid-round-multi.htm

I didn’t bothering changing the images on the inner elements so they don’t match up but the technique is valid.

Have a look and see if that helps and if not you’ll have to post a link to your layout so we can see what’s going on.

140 Jarod

That works in IE6! I’ll try that. Thanks a lot, you’ve been a GREAT help.

-Jarod

141 DoubleB

Hi,

I too am having trouble getting the leftside.gif image to show up. I saw others with the problem but the resolution was not posted. Any help would be appreciated. I used your images and css. I tried it with my own images with some poor results, but that is another story. :)

Thanks, great tutorial.

142 Paul OB

@DoubleB – Hi, do you have a link to the page and I’ll take a look?

Sounds like a position relative (or possibly “haslayout”) issue but I’d need to see the code forst to be sure.

143 DoubleB

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.

Thanks again,
BB

144 Paul OB

If you can’t get it to work then email me the files and I’ll take a look.

145 DoubleB

OK, how do I get them to you?

I tried adding a position: reltive to the elemtn that the leftside.gif hangs off but no change.

Thanks

146 Paul OB

Email them to me. You can find an email address on my contact page at my site (click on my name above).

147 Paul OB

@DoubleB -I have emailed you the answer to your problem which was mainly the fact that you changed the classname in the CSS but didn’t update the html accordingly :)

148 DoubleB

Thanks Paul, although I am afraid I didn’t get anything. I’ll check again. Could you verify the address you sent it to.

Thanks again,

149 Paul OB

Hi,

I just replied to the address it arrived on :)

Here are the details anyway.

——————
Hi,

The main problem is that you changed the class of the liquidRound container but didn’t change the html.

.liquidRound
{
width:50%;
margin:0px auto;
position:relative;
background:#fff url(leftside.gif) repeat-y left top;
}

You also need the same 20px height here in both these elements (or whatever height you need):

.top
{
width:100%;
height:20px;
background:url(top.gif) no-repeat left top;
}

.top span
{
display:block;
position:relative;
height:20px;
background:url(http://www.search-this.com/rounded/top-right.gif) no-repeat right top;
}

You had one at 20px and one at 10px!

Regards

Paul

150 Paul OB

The html should be “div class=”liquidRound”>”

151 Steve

You could always just use CSS3 rounded corners. These work well in Firefox 2 & 3 and Safari. IE does not support them yet but then again I dont think that is going to change in a hurry,

Another way do do rounded corners is to have a with a inside. Make a panel a fireworks or Photoshop with rounded corners then slice the top rounded corners and save that as h2-back or something like that then slice the bottom of the panel and save it as div back.

div { background:url(“div-back.png”) bottom left no-repeat #fff; padding:15px; }

div h2 { background:url(“h2-back.png”) 0 0 no-repeat; margin:-15px -15px 0 -15px; padding:15px; }

You may need to add the _position:relative hack for ie6.

Just another approach to save having unnecssary div and classes.

152 Mike Homme

Hi Paul,

First off, great idea for rounded corners, works awesome!

I too was having a problem with the non-clickable elements such as buttons or links inside center-content. It has something to do with the negative margins for sure, but this fix works for me on IE7 and Firefox 3

On the center-content selector, change

margin:-1px 0px -50px 0px;

to

padding:-1px 0px -50px 0px;

This kept everything looking nice, and now I can click too! :)

Thanks again!

153 Dan Liew

Thank-you very much for this well written and very informative. This was exactly what I was looking for, no JAVASCRIPT in sight yum!

154 Paul OB

Thanks for the comments :)

Mike the negative margins were to pull the content into the gradient but will of course cause issues with links etc.

Although you have changed it to negative padding there is actually no such thing as negative padding and therefore all you have done is remove the margins and allowed the links to work :)

155 Fumin

Great example! I’ve been wanted to learn the trick for a while.

156 Sarah

Great tutorial, it really helped me code my boxes. However, I’m having a problem with them in IE6 (and a little in IE7, but it’s less of an issue). I’ve posted my problem on a number of forums and have received no help. Would you be willing to take a look for me and see what you think?

Thanks!!

157 Paul OB

Sarah, send me an email or post a link to the problem and I’ll take a look.

158 Sarah

Ok, thanks, will do! I assume the email address on your website is the one I should use?

159 Paul OB

Hi Sarah,

It looks like you have “haslayout” issues in your page. Try these fixes:

div.rightBox,
div.rightCenter-content{min-height:0}/* haslayout fix ie7*/
* html div.rightBox{height:1%}/* haslayout fix ie6*/

160 Sarah

Paul – Thanks, those fixes worked! However, now a new issue came up. In both IE6 and 7, the background image on the middle left (div.rightBox) of the right boxes is showing up in between the boxes.

161 Paul OB

Sarah, update your page with my fixes and I’ll take another look.

162 Dmitry

Hi Paul,

I inserted an image inside a rounded box and assigned it an id with a negative top margin to get it exactly where it needs to be. It works perfectly except for ie6 where the image is cut off by the(.top span). How can I get my image to display above the (.top span) in ie6? Look forward to any help you may be able to provide.

163 Dmitry

Hi Paul,

I inserted an image inside a rounded box and assigned it an id with a negative top margin to get it exactly where it needs to be. It works perfectly except for ie6 where the image is cut off by the(.top span). How can I get my image to display above the (.top span) in ie6? Look forward to any help you may be able to provide.

#companyPageBanner {
margin-left: 22px;
margin-bottom: 8px;
margin-top: -15px;
}

164 Dmitry

.bgliquid-round {
background-color: #fff;
background-image: url(bgleftside.gif);
background-repeat: repeat-y;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
width: 740px;
margin-left: 35px;
position:relative;
clear:both;
z-index: 1;
}

.bgtop {
height:32px;
background-image: url(bgtop.gif);
background-repeat: no-repeat;
background-position: left top;
margin-top: 0px;
}

.bgtop span {
display:block;
position:relative;
height:32px;
background-image: url(bgtop-right.gif);
background-repeat: no-repeat;
background-position: right top;
}

.bgcenter-content {
position:relative;
background-image: url(bgrightside.gif);
background-repeat: repeat-y;
background-position: right top;
margin-top: -1px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 0px;
}

.bgbottom {
height:32px;
background-image: url(bgbottom.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

.bgbottom span {
display:block;
position:relative;
height:32px;
background-image: url(bgbottom-right.gif);
background-repeat: no-repeat;
background-position: right bottom;
overflow: hidden;
}

165 Darlene

Hi Paul,

I have adjusted the size so it will have a 603 x 845. But the right side gif does not appear. it went fine with the size 170 x 100.

Here is the CSS:

#liquid-round2 {
width:100%;
margin:0px auto;
background:#fff url(myndir/leftside.gif) repeat-y left top;
}

.top2 {
width:603px;
height:30px;
background:url(myndir/top2.gif) no-repeat left top;
}

.top2 span {
display:block;
position:relative;
height:30px;
background:url(myndir/top_right2.gif) no-repeat right top;
}

.center-content2 {
position:relative;
background:url(myndir/rightside.gif) repeat-y right bottom;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}

.bottom2 {
width:603px;
height:845px;
background:url(myndir/bottom.gif) no-repeat left bottom;
}

.bottom2 span {
display:block;
position:relative;
height:845px;
background:url(myndir/bottom-right.gif) no-repeat right bottom;
}

Thanks,
Darlene

166 Darlene

Hi Paul,

I have adjusted the size so it will have a 603 x 845. But the right side gif does not appear. it went fine with the size 170 x 100.

Here is the CSS:

/* for the maincontent round-box*/
#liquid-round2 {
width:100%;
margin:0px auto;
background:#fff url(myndir/leftside.gif) repeat-y left top;
}

.top2 {
width:603px;
height:30px;
background:url(myndir/top2.gif) no-repeat left top;
}

.top2 span {
display:block;
position:relative;
height:30px;
background:url(myndir/top_right2.gif) no-repeat right top;
}

.center-content2 {
position:relative;
background:url(myndir/rightside.gif) repeat-y right bottom;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}

.bottom2 {
width:603px;
height:845px;
background:url(myndir/bottom.gif) no-repeat left bottom;
}

.bottom2 span {
display:block;
position:relative;
height:845px;
background:url(myndir/bottom-right.gif) no-repeat right bottom;
}

and the HTML:


welcome

Thanks,
Darlene

167 Paul OB

Hi Dmitry,

Sorry I missed your post as I didn’t seem to get notification.

Do you have a link to the problem as I like to see the thing in action before I debug ?

You can email me the link if you don’t want it public.

168 Paul OB

Darlene, I will need a link as I can’t really debug from snippets.:)

169 Paul OB

Darlene what is the width of the parent wrapper? You have it at 100% and then you have widths on the inner elements which should not need widths.

I’d need to see your page to debug fully.

170 Paul C

Paul,

Wonderful tutorial and have the boxes looking good on my test page.

However, I can’t get the linked images I’ve put in the boxes to work. What am I missing?

http://p2.theaardvark.com/aardvark/

Thanks!

171 Paul OB

Hi,

There can be an issue with links when you have them close to the bottom of that element because of the negative margin that pulls content into the large shadow at the bottom.

This has the effect that the bottom sits on top of the content and links in that bottom section can’t be linked.

You can easily fix most browsers except ie6 because of it’s bad handling of z-index and changing something usually affects something else.

Try this but check it doesn’t break IE6.

Remove the position:relative from .center-content and then apply a high z-index to the anchor.

e.g.
.center-content {
/*position:relative;*/
background:url(images/rightside.gif) repeat-y right top;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}
.center-content a{position:relative;z-index:999}

172 Kamen

Great! That’s very smart.
I went directly to the example and copy pasted the code :)
I think you need to change the right-padding of the center-content to 25px (not 20), since this is the width of the right side image. When you resize very slowly the box, part of the last character is cropped

173 Paul OB

@Kamen – Well spotted I never noticed that before :)

174 Swat Khan

This is great! Thanks so much. :)

175 jaromir

Nice tutorial, but..

1). There should be set min-height somehow cause if there is nothing in center-content it has strange behaviour.
2). There is a problem with div.bottom: if we have for example only one link in the .center-content we can not use it cause it is hidden by .bottom. Setting z-index doeas nothing for me.

Anyway – fast and cheap way to create rounded corners.

176 Paul OB

Hi Jaromir,

Thanks for your comments.

The problem with number 2 has been talked about in previous posts and unfortunately its due to the negative margin at the bottom dragging the backround up which covers the links.

You can reduce the margin but then the background fade doesn’t slide up into the text. Most examples wouldn’t use such a big fade at the bottom and it’s a drawback to this design. I should have just made a smaller fade to avoid the issue :)

177 jaromir

@Paul OB

Thx for your reply :D I have made few changes. I’ve resized images for bottom and bottom-right to 1000×30 px and set negative margin for .content to -5px and everything is OK. It looks like before and there is no problem with text and links near the bottom.

This way there is 25px padding at the bottom part of the box.

Later I will post somewhere my idea for rounded box, cause this is nice, but if we try to make something like popup window with transparency behind it, then that idea fails I think.

But, once more thx for your post!!

178 bogs

Hi, nice tuturials.
i’ve been rading for a while all the comments but i still cant make my left side visible…
all the rest have been shown perfectly aside from the left

here’s the url
www1.rveritas-asia.org/urdu

used the same css code and html code as per example.
any help will be highly appreciated. thank you.

179 bogs

Thanks for the tuturial. I solved the problem (left side not showing) by adding new tag before and closing after the content area.
at the css file added
.leftsideshow {
position:relative;
background: transparent url(..leftside.gif) no-repeat left top;
}
again thanks for the very good example.

180 karuppiah

Hi Folks,

I got impressed when i read this article. Very simple markup as well as style sheet used here.
I would like to add my point also.
IF we use empty div tag instead of empty span tag we can able to reduce 2 rules from each of the top and bottom classes.
Please see my code. I have removed the following 2 rules from these classes respectively #liquid-round .top span and #liquid-round .bottom span

display:block;
position:relative;

Here you go..

#liquid-round .top div {
height:20px;
background:url(/images/top-right.gif) no-repeat right top;
}
#liquid-round .bottom div {
height:60px;
background:url(/images/bottom-right.gif) no-repeat right top;
}

Please leave your valuable comment.

181 Paul OB

Thanks for your comments :) Cutting down on code is always a good idea and you should use every opportunity to rationalise the css and html where possible.

In the demos I usually try to keep things simple to make them easier to understand but of course there are always refinements that can be made :)

182 chris

great tuturial.
now that i’ve used the rounded corner successfully, i created 2 instance having both 48% of the page. now it loads 2 round corner vertically.
How can i make the two dislay inline?
any help is much appreciated. thanks

183 Paul OB

Hi Chris,

If you want the bixes side by side you will need to float the main parent.

Something like this:

http://www.pmob.co.uk/temp/liquid-round2boxes.htm

[...] article from search-this explains how to create a rounded corners by using a simple HTML markup with some CSS rules. It is [...]

185 LadyLove

Great tutorial!!! I have managed to create my own round corners in Photoshop and use these same codes. Works Great :)

186 Shawn

Great tutorial. I’m almost there but could use a little help tweaking it.

I added text to the top part (my header over the top image). The top right corner is a bit of a mess and the left middle image is thinner than it should be. Any help would be appreciated.

a little more info:
I am using 2 images in the header section (height 30px, left image 700px, right image 12px). the height for the middle images is 4px and the height for the bottom is 12px.

the modified code:

#liquid-round {
width:40%;
margin:0px auto;
background:#fff url(ml.gif) repeat-y left top;
}

.top {
width:100%;
height:30px;
color:#FFFFFF;
font-size:13px;
background-image: url(tl.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 5px;
padding-left: 10px;
padding-right: -10px;
padding-bottom: -5px;
}
.top span {
display:block;
position:relative;
height:20px;
background-image: url(tr.gif);
background-repeat: no-repeat ;
background-position: -20px -6px;

}
.center-content {
position:relative;
background:url(mr.gif) repeat-y right top;
padding:1px 10px 1px 10px;
margin:0px 0 0px 0;
}

.bottom {
height:12px;
background:url(bl.gif) no-repeat left bottom;
}
.bottom span {
display:block;
position:relative;
height:12px;
background:url(br.gif) no-repeat right top;
}

HI THERE


this is some text this is some text is some text this is some text this is some text this is some text

187 Paul OB

Hi Shawn,

I’d really need to see the site to debug as I need the images to work with.

Looking at the code then something like this should work.

#liquid-round {
width:40%;
margin:0px auto;
background:#fff url(images/ml.gif) repeat-y left top;
position:relative;
clear:both;
z-index:1;
}
/* ………..*/
.center-content {
min-height:40px
}
/* mac hide \*/
* html .center-content {
height:40px;
}
/* end hide */
.center-content p {
position:relative;
z-index:999
}
.top {
height:30px;
color:#FFFFFF;
font-size:13px;
background:url(images/tl.gif) no-repeat left top;
}
.top span {
display:block;
position:relative;
height:20px;
background:url(images/tr.gif) no-repeat right top;
}
.center-content {
position:relative;
background:url(images/mr.gif) repeat-y right top;
padding:1px 10px 1px 10px;
margin:0;
}
.bottom {
height:12px;
background:url(images/bl.gif) no-repeat left bottom;
}
.bottom span {
display:block;
position:relative;
height:12px;
background:url(images/br.gif) no-repeat right top;
overflow:hidden;
}

Note that there is no such thing as negative padding (negative margins yes – but not padding or height)

As I said above I’d need to see the page to debug further.

188 Mmonk

Hi.
I really appreciate this thorough post on rounded corners. I have a question though..

Basically what i want is to have a custom frame around an image (not text). this frame would consist of 6 (preferably 8) images. this frame would go around a cartoon i have on a wordpress site(dynamic, see link). problem is, not all cartoons have the same dimensions, so there is neither a fixed width nor height i can specify in css.
i just want the frame to enclose the img right around its edges whatever its dimensions may be. not a bigger frame, not smaller, and to make it more difficult, i would like all sides to -stretch- instead of partially show. this is because the sides have irregular shapes that if partially shown might not match the adjoining corners.

I hope I’m not too demanding in asking this, but I’ve been looking all day for a way to do this. My knowledge of css is basic. I’ve tried applying your code and insert an image instead of text for content, but it doesn’t come out as i described.

Come to think of it it’s probably cause i don’t want the frame to be liquid, but to resize dependent on the enclosed img.
Any help would be much appreciated, thanks.

189 Paul OB

Hi Mmonk,

The techniques are basically the same whatever you do and you just have to hang the pictures on the right hooks.

You can only have square shaped elements in CSS so I’m not sure what you meant about irregular shapes.

There is nothing special about applying round corners to elements and in the basic form you just wrap enough elements around the object and stick your images in place.

If you want to be clever then you start cutting down the number of images and painting 2 sides at once as in this article.

Alternatively you can get away with a single image as in these demos.

http://www.pmob.co.uk/temp/roundcorner-oneimage.htm

http://www.pmob.co.uk/temp/roundshadow-oneimage-opera.htm

190 Mmonk

Thanks for the help.
I tried both the links u sent.
Made a temporary graphic for the frame and it wraps around the other image nicely without having to specify its dimensions.
However it shows the box multiple times on top of eachother, as u can see here. This is what i meant by irregular sides, the graphic has kinda jagged edges. hxxp://www.mastermonk.com/test/test.htm
I think it probably wouldn’t have been so hard if my content image had a fixed width or height. Anyway, maybe I’ll just try using a frame even though that’s ‘not done’

191 Paul OB

@MMonk: I can see your image now:

http://www.mastermonk.com/test/roundmenu3.png

The problem with this is that you can’t slice or join it anywhere because it will never match up.

You either need to create something more symmetrical or use individual images for each element that you want to wrap.

You could try and stretch the image using a foreground image for the coloured lines but the results won’t be that clean.

Here is an example(sorry but my server seems to be down at the moment so you may have to come back to these links later in the day.):

http://www.pmob.co.uk/temp/monktest.htm

Unfortunately the above fluid version doesn’t work in IE7 so you would need to supply width and heights for IE7 like so:

http://www.pmob.co.uk/temp/monktest2.htm

IE6 would need the pngfix routines added but I doubt that they would work with scaled images like that anyway.

Hope it’s of some use anyway.

192 Mmonk

Thanks a lot, that worked like a charm!
Eventually I decided to go with a fixed width and a repeating vertical image cause like you said, the results are cleaner, see http://www.mastermonk.com
For smaller boxes the resizing solution i like though, so I’ll hold on to that code.
Thanks again, cheers

193 francky

Hi!
Nice article! It’s corners are suitable for pages with a unicolor background behind the corners.
In case you need corners which can scroll over an image background or a gradient background, a different method has to be followed, as the outside of the corners must be transparent.

But transparency support is also possible in css only, and: with only 2 images (or even 1 img, if the left and right border of the box is consisting of a unicolor borderline of some width).

See for a universal method: the 2005 article Liquid Round Corners (http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm).

Also aboard: Liquid Corners Playgarden (http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-index.htm).

Have fun with css!
Greetings,
francky

194 Paul OB

Hi Francky,

Thanks for your comments :)

I did actually cover transparent corners a couple of years ago in another article here:

http://www.search-this.com/2008/01/24/simple-round-corners-in-css-revisited/

Or another method for shadows over gradient backgrounds using one image.

http://www.pmob.co.uk/temp/roundshadow-oneimage-opera.htm

195 Erik

Hi, nice tutorial. I have the box showing up fine, however, when I use it within a table it gets messed. I was able to change the width of top and botttom – that fixed it in chrome and ff but IE is still not displaying correctly.

196 Paul OB

Hi Erik,

You should be able to add a table quite easily

e.g.
http://www.pmob.co.uk/temp/liquid-round2.htm

It’s best to avoid content going into the bottom shadow though if you have links as they can’t be clicked due to the way the bottom part overlaps.

197 spawn3000

it’s best if used css+sprites.

198 Shannon

Let me be the first to thank you in 2010!

This technique is great for a new site I am building. I know I will use it often.

199 alexandra farmer

Hi, This is a great tutorial. But transparency and the use of PNG are quite current these days and allow for more advanced design. The use of transparency will not work with this technique. I lost a bit of time since I did not noticed it at first. See I wanted to make a floating window with transparent round corners. Unfortunately, we can see the tilling of the sliding image behind the transparent round corners.

Any new tutorial in the work for this? See 194 does not provide tutorials for borders with effects all around (stoke and gradient).

I will try 193 suggestion which closely resemble the effect we have here but with transparency:
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm

200 alexandra farmer

The lastest link did not work either as the box sides where css borders instead of images.

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

http://www.smileycat.com/miaow/archives/000044.php

http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

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

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

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

205 Paul OB

Thanks bob – feel free to use the images :)

206 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

207 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:
http://www.pmob.co.uk/temp/searchthis-rounded2.htm

Hope that was what you meant.

208 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

Greetings,
Francky
“CSS: 1000 ways to get the same”

209 Paul OB

Yes that’s a good alternative Francky ;)
Thanks for taking the time to put up a demo.

210 Juan Velandia

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

211 diego rojas

simply excellent. easy, simple and functional.

212 CF

Great tutorial… it is very simple& easy to follow up!!! :D

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

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

215 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…

216 Seifer

Nice Tutorial :D

217 andy

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

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

Wayne

219 francky

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

Good luck!

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

221 Martijn

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

222 Paul OB
223 Martijn

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

224 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:
http://www.makeuseof.com/dir/rounded-css-boxes-rounded-corners-online/

There are many more on google.

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

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

227 Smykker Online

Thank you for this tutorial, this was exactly what i was looking for :)

228 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?

229 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?

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

http://www.pmob.co.uk/temp/searchthis-rounded2.htm

231 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?

232 Paul OB

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

233 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 [...]

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

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

237 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 [...]

239 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 [...]

240 Rob

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

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

242 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

Blogs Worth Reading