How do you get this border effect in CSS?

celebritymusic · February 26th, 2007, 07:43 PM

Hi

Here's an example of the effect I'm talking about http://www.lafraise.com/

How do they get the nice white border, with the rounded edges, and the small drop shadow? Is it all graphics, or some CSS programming?

Cheers

S

**RicheemxX** · February 26th, 2007, 07:54 PM

Assuming you mean the border on the corners of the page like this http://www.lafraise.com/fileadmin/la...ges/lflogo.jpg thats all done in photo shop or some other program and the total image is sliced to be added to the page

and this is in the wrong forum

**RobRich** · February 26th, 2007, 10:19 PM

Thread moved to web development forum.

celebritymusic · February 27th, 2007, 02:09 AM

Cheers for that.

I'm actually refering to the CSS code for the thin white border that follows on from this image. Plus, are all the corners just graphics, or is it code?

Thanks

carl33p · February 27th, 2007, 02:37 AM

Dont have a clear picture of what your referring to.
But most likely, its all graphics. I would proly make it all in Photoshop, then use image mapping for links.

sr71000 · February 27th, 2007, 02:30 PM

ehh...some is code...some is done with imgs. anything that's shaded or rounded is an image...anything that is a solid color and spans an entire area is css. As a general rule what I do is create 4 small ims that are the background color and make a div whatever color i want it to be. Then i position the 4 rounded corners of the background colors in the 4 corners using absolute positioning. that way I don't have to use a gigantic image and the box can be resized fluidly if i so choose!

**RicheemxX** · February 27th, 2007, 03:40 PM

Pretty much just as sr71000 explained the guy created two corner stones at the top and repeated and small image that creates the top border and blue gradient color areas and then created a small image that runs the sides for the borders. Finally there is another full length image for the bottom corners and border.

celebritymusic · February 28th, 2007, 02:24 AM

Thanks for your help guys.

I'm new to CSS. Just wondering if there is a way to make those small images you talk about repeat down the sides without having to insert a million image tags?

Cheers

Shaun

sr71000 · February 28th, 2007, 02:31 AM

depends on how you're doing the layout....and yea....you can't just specify img after img if you don't know the size of that your going to be displaying!! just make a div that's say 10px wide and 100% tall (fills parent container) and set the background to the img you want and repeat y. That'll make it go all the way along the left side. Then with absolute positioning you can do the same thing with the right, top, and bottom. Then last you add the corners in

the beautiful thing about html and css is you can see their source!! check out that page and figure out how they did it if you can...best way to learn!