View Full Version : Curved box help and advice

Mar 25th, 2009, 11:59 AM
Hi all,

I want to create a curved box that isnt aas conventional as the usual boxes Iv been created but Im not sure on how to achieve this effect, Iv inserted a .gif on the following page (http://www.glen-lodge.co.uk/testing/quilly/curved.html) of what id like to achieve but would love some advice on how it can be achieved, as Iv said Iv been able to create the usual curved boxes but want to step away from these in my current charity based site.

Many many thanks in advance.


Mar 25th, 2009, 12:24 PM
You want to have a curved content effect on your web site?
If that's what you are trying to achieve, than you will need an image like you have, that is curved. I suggest use .png so that you can make it transparent outside the curve.

Next you will need to use CSS or HTML tables (my suggestion, use CSS)

Here is an example of CSS code:

width: image size;
height: image size;
background-image: url(path/to/your/image.png);

This will set your image as background in the divider, so you will be able to do whatever you like on top without touching an image. That should add a curve effect to your web site.

You can also do the same with HTML tables; see the example:

<table border="0">
<td background="path/to/your/image.png">Second</td>

If you have a lot of content on some pages, and much less on others, you will need to cut your image on 3 pieces and have 4 dividers: holder, top of the curve, content and bottom of the curve. This will create an ability to extend your background-image without repeating it.

Q: Is there another way?
A: Yes, No, Maybe so :) (I've never heard about other way to do that)

I hope this helps, and don't hesitate to ask if you need more help.

Mar 25th, 2009, 12:58 PM
Hi and thanks for your response,

Basically I want to cut that image up using the bare necessities of the image and filling the bulk of it with background color. I also want the curved box to expand when the text is enlarged in order to contain the text? I really dont want to use the whole image as a background?

Mar 25th, 2009, 01:06 PM
Yes. That's why I suggested to cut you image on 3 pieces. One is top, another in bottom ( both curved ). The third one will be in the middle, and it will be were content will go. Set the middle divider height to auto, so that it will expand - (middle) image on its background will repeat itself. So you can make a middle image 1 px in height and it will just keep repeating itself as you add more content.

I am sorry if its confusing, my English not that grate. Tomorrow I will write a code example if you will still need help.

Mar 25th, 2009, 01:08 PM
Q: Is there another way?
A: Yes, No, Maybe so (I've never heard about other way to do that)

There are many effective ways to make the rounded corner boxes, without using tables to make the layout(which is considered as is very stupid) (http://www.hotdesign.com/seybold/)

Take a look at www.html.it/articoli/nifty/index.html and www.roundedcornr.com/

Mar 25th, 2009, 01:13 PM
Some other help here (http://exitfegs.co.uk/RndCorn.html)


Mar 25th, 2009, 02:10 PM
Fantastic help guys, thank you so much!!!


Mar 25th, 2009, 07:22 PM
Hello Kyllle,
Have a look at this box - http://nopeople.com/kyllle/
I took your image, got rid of the text and made the middle till the image is 600px tall.

You can use several of them like this.
Add any header you like now, the box will expand with as much text as you want to put in it...until it hits the 600px.

Here is the image that does it - http://nopeople.com/kyllle/slider.jpg

Mar 25th, 2009, 11:47 PM
here's another option, but I need to figure out how to resize the bg to 100% of the div. Does anyone know? The top and bottom can be set to resize automatically by using width="100%" in the img tags.
It's probably better to make the images for each div seperately.

Mar 26th, 2009, 12:27 AM
There are many effective ways to make the rounded corner boxes, without using tables to make the layout(which is considered as is very stupid) (http://www.hotdesign.com/seybold/)

The tables way were an option, although I suggested to use CSS and explained as best as I can how to do that. I never said there are no other way besides CSS and Tables, but those were the only ways I knew of. Thanks for sharing the links though, now I know another way: "Nifty Corners with CSS and Javascript".

Mar 26th, 2009, 12:56 AM
Have a look at my tutorial.
Uses pure CSS and only ONE, let me repeat that, ONE IMAGE for all four corners.

Let me know if it helps at all.


Mar 26th, 2009, 01:52 AM
Check out this version

Mar 26th, 2009, 11:33 AM
Thanks guys all your help is greatly apprecaited and I will try each and every one of them out to get the best results!!! Thanks so much!!