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

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

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.

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

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.

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

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…

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

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.

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

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

[...] http://www.search-this.com/2007/02/12/css-liquid-round-corners/ [...]

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

Left and right paddings are equal to 20px.

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

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?

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

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

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

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

Hi great.

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

BerD

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.

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

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”>

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.

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.

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?

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.

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

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!

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

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

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?

hoo, muchas gracias

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

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 */

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.

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.

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

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;}

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

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-

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-

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.

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-

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

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

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

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

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
}

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

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

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

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

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

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/

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!

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

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

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

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

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 –
…..

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!

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

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.

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

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.

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-

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

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.

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.

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.

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

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

@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

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

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.

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

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

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

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*/

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

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;
}

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

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.

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.

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}

@Kamen – Well spotted I never noticed that before

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.

@Paul OB

Thx for your reply 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!!

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.

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

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

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

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.

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

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

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

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.

it’s best if used css+sprites.

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

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/