Table borders not straight

Question

I am creating a html maze using tables and for some reason, the borders dont show up correctly. Instead of nice straight lines, the borders show up as diagonal blobs instead. Is there a way to fix this? Here is my example : http://thomaswd.com/maze.

Output:

My CSS:

section .l {
    border-left:20px solid #ff9c00;
}

section .r {
    border-right:20px solid #ff9c00;
}

section .t {
    border-top:20px solid #ff9c00;
}

section .b {
    border-bottom:20px solid #ff9c00;
}

section table {
    margin-right:auto;
    margin-left:auto;
    border:20px solid #FF9C00;
}

Answer 1

Remove border: 20px solid transparent; from your section table tr td selector (not shown in your code sample) and it looks fine.