how to make edges round in CSS?

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

For browsers which do not support border-radius, you can use roundies.js.

Answer 2

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.

Answer 3

#wrapper {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

check this out!