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:
- Left side image
- Top left image and top border combined
- Top right corner
- Right side image
- Bottom left corner and bottom border combined (including a bottom shadow)
- Bottom right corner with shadow
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 lose 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:
-
<div id="liquid-round"></div>
-
#liquid-round {
-
width:70%;
-
margin:0px auto;
-
background:#fff url(http://www.search-this.com/rounded/leftside.gif) repeat-y left top;
-
}
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
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:
-
.top {
-
width:100%;
-
height:20px;
-
background:url(http://www.search-this.com/rounded/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;
-
}
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.
-
<div class="center-content">
-
<!-- CONTENT BEGIN -->
-
<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>
-
<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>
-
<!-- CONTENT END -->
-
</div>
-
.center-content {
-
position:relative;
-
background:url(http://www.search-this.com/rounded/rightside.gif) repeat-y right top;
-
padding:1px 20px 1px 25px;
-
margin:-1px 0 -50px 0;
-
}
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.
-
.bottom {
-
height:60px;
-
background:url(http://www.search-this.com/rounded/bottom.gif) no-repeat left bottom;
-
}
-
.bottom span {
-
display:block;
-
position:relative;
-
height:60px;
-
background:url(http://www.search-this.com/rounded/bottom-right.gif) no-repeat right top;
-
}
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.
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.
February 12th, 2007 at 10:37 am
[...] 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. [...]
February 12th, 2007 at 11:36 am
Don’t forget to be a good neighbor and digg it: http://digg.com/design/CSS_Liquid_Round_Corners
February 14th, 2007 at 1:35 pm
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
February 14th, 2007 at 3:55 pm
>> 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…
February 15th, 2007 at 3:02 pm
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.
February 16th, 2007 at 4:01 am
Nice one Paul.
February 16th, 2007 at 9:38 am
>> 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.
February 16th, 2007 at 9:54 am
There are some round corner generators about if you google for them. However its best to learn to make your own.
February 18th, 2007 at 9:03 am
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.
February 18th, 2007 at 10:01 am
There is a demo here using :before and :after to good effect:
http://virtuelvis.com/gallery/css/rounded/
February 19th, 2007 at 9:10 pm
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
March 1st, 2007 at 2:34 pm
Anyone have photoshop images of the tutorial?
March 5th, 2007 at 7:41 pm
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…
March 5th, 2007 at 7:43 pm
Sorry. Just found it. It is a teeny weeny link though! strong tags would have been nice!
March 22nd, 2007 at 4:23 am
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..
March 27th, 2007 at 4:44 pm
i love it
thanks for the good info
April 8th, 2007 at 4:56 pm
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.
April 9th, 2007 at 4:01 am
Bill - Send me an email with the link and I’ll take a look (paul@pmob.co.uk)
April 11th, 2007 at 5:19 pm
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
April 12th, 2007 at 4:32 am
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.
April 12th, 2007 at 6:41 pm
And indeed it has. Thanks, Paul. I really appreciate your patience and willingness to talk me through this.
April 19th, 2007 at 3:47 am
[...] CSS Liquid Round Corners [...]
May 1st, 2007 at 9:19 pm
[...] http://www.search-this.com/2007/02/12/css-liquid-round-corners/ [...]
May 13th, 2007 at 5:11 am
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.
May 13th, 2007 at 5:12 am
Sorry, I meant:
padding:1px 20px 1px 20px;
Left and right paddings are equal to 20px.
May 13th, 2007 at 9:26 am
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.
May 22nd, 2007 at 9:20 am
Is there a way to add tabs to the top of the box to change the content displayed within the box? Thank you.
May 22nd, 2007 at 10:49 am
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
June 14th, 2007 at 4:47 pm
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?
June 15th, 2007 at 10:56 pm
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
June 15th, 2007 at 11:39 pm
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
June 20th, 2007 at 9:26 am
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.
June 20th, 2007 at 9:40 am
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
June 28th, 2007 at 5:35 am
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?
June 28th, 2007 at 7:05 am
@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!
June 29th, 2007 at 12:51 pm
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.
June 29th, 2007 at 12:52 pm
I would link to mine but it isn’t online yet. Just in a workshop site.
June 30th, 2007 at 7:51 am
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.
July 2nd, 2007 at 7:17 am
Hi great.
Is there also someone who knows how to get 3 boxes in 3 horizontal colums
BerD
July 2nd, 2007 at 4:34 pm
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.
July 5th, 2007 at 10:35 am
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.
July 5th, 2007 at 1:56 pm
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.
July 10th, 2007 at 2:30 am
I tried this tut , but in IE7, you can’t use float div’s inside the center-content, it ruins the bottom corners.
July 10th, 2007 at 2:45 am
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;
}
July 11th, 2007 at 11:03 am
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”>
July 11th, 2007 at 11:05 am
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…..
July 17th, 2007 at 6:46 am
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.
July 18th, 2007 at 9:35 am
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.
July 18th, 2007 at 11:44 am
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.
July 19th, 2007 at 12:02 pm
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
July 19th, 2007 at 3:56 pm
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?
July 19th, 2007 at 6:05 pm
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?
July 20th, 2007 at 3:30 am
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.
July 25th, 2007 at 7:08 am
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?
July 25th, 2007 at 11:40 am
@ws - Sounds like you haven’t cleared a float somewhere but I’d need to see the code to be sure.
August 4th, 2007 at 7:03 am
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.
August 6th, 2007 at 2:22 pm
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!
August 6th, 2007 at 3:18 pm
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?
August 9th, 2007 at 2:47 pm
I enterred a clear command and it worked just fine. Thanks.
August 9th, 2007 at 3:47 pm
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.
August 9th, 2007 at 4:34 pm
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
August 9th, 2007 at 4:49 pm
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.
August 10th, 2007 at 5:31 am
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?
August 10th, 2007 at 7:20 am
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.
August 11th, 2007 at 10:51 am
hoo, muchas gracias
August 17th, 2007 at 6:45 pm
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?
August 18th, 2007 at 2:58 am
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.:)
August 19th, 2007 at 10:42 am
Hi Paul-I just sent the files to you.
August 19th, 2007 at 1:00 pm
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 */
August 20th, 2007 at 1:45 am
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.
August 20th, 2007 at 11:24 am
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.
September 20th, 2007 at 10:24 am
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
September 20th, 2007 at 3:20 pm
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.
September 20th, 2007 at 3:29 pm
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
September 20th, 2007 at 3:30 pm
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
September 20th, 2007 at 3:37 pm
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/
September 20th, 2007 at 3:55 pm
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;}
September 20th, 2007 at 4:27 pm
Thankyou for your help. It works great now.
September 24th, 2007 at 6:21 pm
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
September 26th, 2007 at 6:40 am
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.
October 2nd, 2007 at 12:02 pm
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-
October 2nd, 2007 at 3:26 pm
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
October 2nd, 2007 at 9:28 pm
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-
October 2nd, 2007 at 9:30 pm
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-
October 3rd, 2007 at 3:56 am
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.
October 3rd, 2007 at 8:56 am
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-
October 3rd, 2007 at 11:14 am
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-
October 3rd, 2007 at 1:12 pm
>>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.
October 10th, 2007 at 9:37 am
Great work - Finally a rounded box that exposes all the correct methods.
October 28th, 2007 at 1:12 am
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.
October 30th, 2007 at 8:36 am
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
October 31st, 2007 at 10:06 pm
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. :-/
November 1st, 2007 at 3:47 am
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. ;))
November 13th, 2007 at 8:03 am
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.
November 13th, 2007 at 11:24 am
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:)
November 13th, 2007 at 1:04 pm
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!
November 13th, 2007 at 1:22 pm
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
}
November 13th, 2007 at 2:22 pm
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.
November 13th, 2007 at 2:59 pm
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
November 24th, 2007 at 3:36 am
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.
December 4th, 2007 at 11:09 pm
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
December 5th, 2007 at 9:59 am
Hi Kris,
Have you got a link and I’ll take a look? It’s too hard to guess without seeing the code etc :).
December 10th, 2007 at 8:13 am
[...] 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 [...]
December 11th, 2007 at 7:11 am
What a shame i missed this tutorial here
January 7th, 2008 at 4:29 am
just felt like i had to say thanks for helpin out here ^^
January 17th, 2008 at 7:48 am <