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.

possible duplicate of [Rounded Corners](http://stackoverflow.com/questions/812301/rounded-corners) — sandeep, Jan 30 '12 at 08:36

Alex Coplan · Accepted Answer · 2012-07-12T10:22:42.757

7

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.

edited Jul 12 '12 at 10:22

answered Jan 30 '12 at 08:17

Alex Coplan

13,211
19
77
138

Should be noted that this doesn't work in IE8 and older and that a webkit vendor prefix for box-shadow (-webkit-box-shadow:) is useful if one wants to support Android and the previous versions of Safari on OS X and iOS. – VoxPelli Jan 30 '12 at 08:31

score 2 · Answer 2 · answered Jan 30 '12 at 08:20

#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!

score 1 · Answer 3 · edited Feb 12 '12 at 17:38

1

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

edited Feb 12 '12 at 17:38

Alex Coplan

13,211
19
77
138

answered Jan 30 '12 at 08:44

onionpsy

1,502
11
15

how to make edges round in CSS?

3 Answers3