I'm encountering an issue where opaque borders are overlapping each other, causing the alpha value to be twice as high as intended.
This problem seems to only affect the first n-1 elements — the last child is rendering correctly.
Check out the Codepen example: http://codepen.io/anon/pen/vEyeBG?editors=110
HTML:
<h2>Prices</h2>
<table class="prices">
<tbody>
<tr>
<td>Bananas</td>
<td>$1/lb</td>
</tr>
<tr>
<td>Oranges</td>
<td>$4/lb</td>
</tr>
<tr>
<td>Peaches</td>
<td>$2/lb</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Carrots</td>
<td>$1/lb</td>
</tr>
<tr>
<td>Lettuce</td>
<td>50¢/head</td>
</tr>
<tr>
<td>Broccoli</td>
<td>$1/head</td>
</tr>
</tbody>
</table>
CSS:
body {
background:#000;
color:#fff;
font-weight:bold;
padding:50px;
}
.prices {
width: 400px;
border-collapse:collapse;
border-top: 2px solid rgba(255,255,255,.2);
}
.prices tbody tr:first-child td {
padding-top: 12px;
}
.prices tbody tr:last-child td {
padding-bottom: 12px;
border-bottom : 2px solid rgba(255,255,255,.2);
}
}
}