CSS圆形边框

Question

I have a form that I would like to round the corner of the borders that you see below. I would like the borders that outline the form to meet and round.

I have tried the border-radius method but it produces this. It rounds the container, which is what I don't want.

I have also taken a look at the CSS border-style property, but it doesn't not have an option for rounded intersections of borders. If anyone can help, that would be much appreciated!

EDIT

I have created a JSFiddle with my HTML and CSS.

Answer 1

First corner removed because of the tab. Here's a FIDDLE

.tab-content {
  border-radius: 0 30px 30px 30px;
  -moz-border-radius: 0 30px 30px 30px;
  -webkit-border-radius: 0 30px 30px 30px;
}

Answer 2

What you want is:

.tab-content{
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

http://jsfiddle.net/stryd3r/vB3m2/1/

Answer 3

While giving the border-radius to your container, give it to the form aswell. :)