<tr> border top working but not border bottom

Question

Here's the issue. I have my code so that I should be seeing a border on top and bottom of each <tr> item. However, I only see what's on bottom except for the top element.

.tstyle1 {
    margin: 10px 0 0 30px;
    width: 950px;
}

.tstyle1 tr {
    height: 120px;
    border-bottom: 1px solid black;
    border-collapse: separate;
    border-top: 1px solid black;
    border-bottom: 1px solid orange;
}

.tstyle1 td {
    border: none;
}

Here's the issue recreated. http://jsfiddle.net/fL3rx/

Solution 1

Try

adding display: block; to your .tstyle1 tr

Solution 2

The issue is that your border-bottom definition is simply covering your border-top definition. So the color beneath does not show. Try setting the border-bottom:none and you'll see the top border shows

The suggestion by @Pricey did some magic though.