0

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:

enter image description here

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;
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Thomas Lai
  • 317
  • 1
  • 6
  • 15
  • duplicate: http://stackoverflow.com/questions/7261703/set-css-border-to-end-in-a-90-instead-of-a-45-degree-angle – Robot Woods Feb 13 '13 at 02:45
  • 1
    Not really a duplicate of that... Also you may want to consider using `border-collapse: collapse` on the `table` element. Should get rid of those gaps. – James Coyle Feb 13 '13 at 02:57

1 Answers1

0

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

enter image description here

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • Transparent borders are a good way to make triangles using only CSS. Worth remembering if you need a speech box style comment display or something. – James Coyle Feb 13 '13 at 02:52
  • 1
    @jimjimmy1995 CSS `transform` works too: http://stackoverflow.com/a/8867645/918414 – ThinkingStiff Feb 13 '13 at 02:54