CSS border collapse not applying to top and left border

Question

This is a test template~ In orde to debug, I have changed the border colour of div (parent of the table) to red. As it is shown, you can clearly see there are BLACK border on the top and the left. I can't fix it. Please help.

html:

<div class="roundcorner">
<table border="1 solid">
    <tr>
        <th>Out of 100 points how would you score Governemnt performance for each section.</th>
        <th>Most like to see increased</th>
        <th>Most willing to see decreased</th>
    </tr>
    <tbody>
        <tr>
            <td id="p2">
                <input type="text" name="name" />
            </td>
            <td id="i1">lakdksakdmksa</td>
            <td id="d1">
                <input type="radio" name="sex" />Yes</td>
        </tr>
        <tr>
            <td id="p2">
                <input type="text" name="name" />
            </td>
            <td id="i2">dsfwsedfwefwe</td>
            <td id="d2">
                <input type="radio" name="sex" />No</td>
        </tr>
    </tbody>
</table>
<div>

css:

.roundcorner {
    border: 1px solid grey;
    border-radius: 10px;
    width: 100%;
    overflow: hidden
}
.roundcorner table {
   // border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
   border: 1px solid grey;
    overflow: hidden
}
th {
    background-color: #EEE;
    padding: 10px;
    border: 1px solid grey;
   border-collapse: collapse;
}
td {
    text-align: centre;
    //border: 1px solid grey;
    border-collapse: collapse;
}
tr:hover {
    background: #fafafa;
    // font-weight:bold;
}
input[type=radio] {
    vertical-align:middle;
    margin-left: 45%;
    margin-right: 45%;
}
input[type=text] {
    width:20%;
    height:20px;
    margin-left:40%;
    margin-right:40%;
    border-radius:3px;
    border: 1px solid grey;
}
td:first-child {
    width: 25%;
    height:60px;
}
td:nth-child(2) {
    width: 50%;
    text-align: center;
    height: auto;
    padding: 10px;
}
td:nth-child(3) {
    width: 25%;
    height:60px;
}

JSFiddle

Answer 1

You might be looking for this:

Working sample: http://jsfiddle.net/707ha2vq/5/

You are having elements containing one another and both with borders, so you get double borders. In a table, you normally give td elements a border and border-collapse: collapse; so borders that are together collapse in two elements. But you are having cell's border and row's border so it won't collapse, there is where you see double or triple borders.

.roundcorner {
    border: 1px solid grey;
    border-radius: 10px;
    width: 100%;
    overflow: hidden
}
.roundcorner table {
   // border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
    overflow: hidden
}
th {
    background-color: #EEE;
    padding: 10px;
    border-collapse: collapse;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
}
td {
    text-align: centre;
    //border: 1px solid grey;
    border-collapse: collapse;
}
tr:hover {
    background: #fafafa;
    // font-weight:bold;
}
input[type=radio] {
    vertical-align:middle;
    margin-left: 45%;
    margin-right: 45%;
}
input[type=text] {
    width:20%;
    height:20px;
    margin-left:40%;
    margin-right:40%;
    border-radius:3px;
    border: 1px solid grey;
}
td:first-child {
    width: 25%;
    height:60px;
}
td:nth-child(2) {
    width: 50%;
    text-align: center;
    height: auto;
    padding: 10px;
}
td:nth-child(3) {
    width: 25%;
    height:60px;
}

Answer 2

I think the those extra borders are of Table borders. Try to replace your css mentioned above with the following, What I did is removed border for table and given required borders for individual header

    .roundcorner {
        border: 1px solid grey;
        border-radius: 10px;
        width: 100%;
        overflow: hidden
    }
    .roundcorner table {
       // border-collapse: collapse;
        width: 100%;
        border-spacing: 0;
       //border: 1px solid grey;
        overflow: hidden
    }
    th:first-child {
        background-color: #EEE;
        padding: 10px;
        border-right: 1px solid grey;
        border-bottom: 1px solid grey;
       border-collapse: collapse;
    }
    th:nth-child(2) {
        background-color: #EEE;
        padding: 10px;
        border-right: 1px solid grey;
        border-bottom: 1px solid grey;
       border-collapse: collapse;
    }
    th:nth-child(3) {
        background-color: #EEE;
        padding: 10px;
        border-bottom: 1px solid grey;
       border-collapse: collapse;
    }
    td {
        text-align: centre;
        //border: 1px solid grey;
        border-collapse: collapse;
    }
    tr:hover {
        background: #fafafa;
        // font-weight:bold;
    }
    input[type=radio] {
        vertical-align:middle;
        margin-left: 45%;
        margin-right: 45%;
    }
    input[type=text] {
        width:20%;
        height:20px;
        margin-left:40%;
        margin-right:40%;
        border-radius:3px;
        border: 1px solid grey;
    }
    td:first-child {
        width: 25%;
        height:60px;
    }
    td:nth-child(2) {
        width: 50%;
        text-align: center;
        height: auto;
        padding: 10px;
    }
    td:nth-child(3) {
        width: 25%;
        height:60px;
    }