<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html lang="en"> <head> <title>Border Collapsing Test</title> <style type="text/css"> .b { border: solid thin blue; padding: 0 0 3em 0; margin: 2em; } .t { display: table; border-collapse: collapse; } .r { display: table-row; } .c { display: table-cell; border: solid 20px; height: 2em; width: 2em; } .r.a > .c.a { border-width: 2px; } </style> </head> <body> <p>The black border below should cut right through the top left corner of the blue border.</p> <div class="b"> <div class="t"> <p class="r a"> <span class="c a"></span> <span class="c b"></span> </p> <p class="r b"> <span class="c a"></span> <span class="c b"></span> </p> </div> </div> </body> </html>