How To Make Edges Round In Css?

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 k

Solution 1:

Using border-radius and box-shadow.

#wrapper {
    border: solid 1px#eee;
    border-radius:10px; /* round corners */box-shadow:0px3px5px5px#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.

Solution 2:

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

Solution 3:

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