Question

I am beginner coder in web design so I have a fairly amateur question to ask. I have created a box of text but I don’t know how to make the edges round rather than rectangular. I know that CSS functions on rectangular borders. If possible, I would also like to add a slight shadow beneath the box, I’m not sure how to implement this also. Here is my code specifically for the box section:

#wrapper{
border: solid 1px #eeeeee;
}

“#wrapper” refers to a piece of php code in another document. Thank you.

Answer 1

Using border-radius and box-shadow.

#wrapper {
    border: solid 1px #eee;
    border-radius:10px; /* round corners */
    box-shadow:0px 3px 5px 5px #000; /* add shadow */
}

Here are the parameters for each…

border-radius:(radius of border corners)
box-shadow:(horizontal offset) (vertical offset) (blur) (spread) (color)

You may wish to prefix your CSS3 properties with -webkit and -moz to increase compatibility with older browsers.