Adding borders

[JuzJoJo]

Hi there.

This is my site http://lights-camera-actions.com/store/
What I've been tryin to do is add a scalloped border on the left and right side of the page where the pink background meets the white background.
I cant seem to find any tut/faq's regarding this so Im hoping someone will be kind enough to point me in the right direction.

Thanks

[gjh42]

It looks like you have a fixed-width site, so it will be easy to add the scallops. First, are you wanting them to stick out from the existing white edge and header, or fit inside the existing white area?
I'll describe the process for the inside version.

Make an image that is the same width as your white area, and one scallop high. Make pink scallops at both sides of it; you can leave the center transparent or make it white as you like. Save the image as
/includes/templates/your_template/images/scallopbg.gif.

Add to your stylesheet

#contentMainWrapper {background: #ffffff url(../images/scallopbg.gif) repeat-y;}

[CoolCarPartsOnline]

You already have a pink border there

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 900px;
vertical-align: top;
border: 5px solid #ee6471;
}

[JuzJoJo]

thanks..will give this a go!!
btw it is an inside border that Im looking for..

[JuzJoJo]

ohh actually i would like the border touching the white edges..is there a way to do that?

[JuzJoJo]

yeah it definitely needs to look like its touching the edges of the white background..
if you take a look you'll see what i mean

http://lights-camera-actions.com/store/

[gjh42]

You mean sticking out from the existing white area? Yes, it can be done, but it will be a slightly different process which I don't have time to explain right now. Actually there are a couple of ways it could be done, and the easiest might be to make it a background for the body element. Someone else who knows CSS should be able to explain.

OK, that wasn't what I meant when I said "pink scallops". They need to be pink "hollow scallops", so you see the effect of white/brown/whatever scallops extending out on top of a pink background.

[JuzJoJo]

Oh im sorry..
Im not sure how to make "hollow" scallops..sorry i did think you meant the actual color

[gjh42]

OK, make a pink background to match the outside color, and put a solid white circle on top of it. Then split it in half and move the parts so the pink is at the edge on both sides of the image. When you repeat that vertically, you will get a "scalloped"effect. I don't know how I can say it any clearer.

[JuzJoJo]

Im sorry..im obviously brain dead when it comes to this ...
when it comes to things I guess Im more of a visual person..
does it matter what size the background?
How do i save the image?