CSS3 border-radius renders differently in Visual Studio project than in HTML file

Question

I encountered an odd problem when migrating an HTML page I'd been developing in notepad++ over to an ASP.NET MVC web template. The issue is this: I have a table with rounded corners at the top and bottom. It looked fine when I opened the local file on my computer. However, when I placed the HTML page, along with the CSS, into my .cshtml file in my ASP.NET MVC project and rendered the page through visual studio I got this (colors changed for greater clarity):

You see on the top-left, that the dark gray border is not round as it should be (and as it is when I open the normal HTML version of the page in the same browser as shown below.) Note that the CSS and HTML are the same in both cases, which means this is not simply an issue of "missapplied" style sheets. The CSS should--and does--work, just not when I open the website in Visual Studio. Why is this happening?

(Also note that I'm actually changing the style of the top-cell-one-to-the-right of the actual top-left cell, but that isn't the issue since the same thing happens on all the other corners.)

Here is the relevant CSS:

/*top left corner*/
table tr:first-child td:first-child + td {
    border-top-left-radius: 20px;
}

/*bottom left corner*/
table tr:last-child td:first-child + td {
    border-left: 3px solid #ddd;
    border-bottom: 3px solid #ddd;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius:20px;
    border-bottom-left-radius:20px;
}

/*top right corner*/
table tr:first-child td:last-child {
    border-right: 3px solid #ddd;
    border-top: 3px solid #ddd;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-right-radius:20px;
    border-top-right-radius:20px;
}

/*bottom right corner*/
table tr:last-child td:last-child {
    border-right: 3px solid #ddd;
    border-bottom: 3px solid #ddd;
    -moz-border-radius-topleft: 20px;
    -webkit-border-bottom-right-radius:20px;
    border-bottom-right-radius:20px;
}

Thanks in advance to anyone who offers a possible solution!

Answer 1

You'll have to put the top-left and top-right border radius on the table itself, or whichever element has the grey border.

table {
 border:3px solid #ddd;
 -webkit-border-top-left-radius: 20px;
 -webkit-border-top-right-radius: 20px;
 -moz-border-radius-topleft: 20px;
 -moz-border-radius-topright: 20px;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
}

/*top left corner*/
table tr:first-child td:first-child + td {
    border-top-left-radius: 20px;
}

/*bottom left corner*/
table tr:last-child td:first-child + td {
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius:20px;
    border-bottom-left-radius:20px;
}

/*top right corner*/
table tr:first-child td:last-child {
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-right-radius:20px;
    border-top-right-radius:20px;
}

/*bottom right corner*/
table tr:last-child td:last-child {
    -moz-border-radius-topleft: 20px;
    -webkit-border-bottom-right-radius:20px;
    border-bottom-right-radius:20px;
}

Answer 2

I figured out the problem. If anyone else runs into this issue and finds this question, the issue is with the normalize.css file included automatically in the standard visual studio template. Inside that file, the border-collapse property was set to "collapse" for the table tag. When I disabled this, the issue disappeared. So the moral of the story--or at least one moral of the story--is that if you are applying a border radius to a table cell with a border, make sure that "border-collapse" is not set to "collapse", otherwise the border will not be rounded. I hope this helps someone.