Simulate borders with CSS - css

Question

When I add td element with a dark background in my table that has a light background with a border, I want that in the dark td element, the border of the table doesn't see.
For example:
table {
border: 1px solid yellow;
width: 40%;
border-spacing: 0;
}
td {
padding: 10px;
}
td.black {
background: #000;
color: #fff;
}
<table>
<tr>
<td class="black">Something</td>
</tr>
<tr>
<td>Something else</td>
</tr>
</table>
In the first td, the dark td, I don't want to see the yellow border of the table.

Answer 1

You can't, but you could just add the border to the default 'td' element insted of 'table' and create a special rule for the black one.
table {
width: 40%;
border-spacing: 0;
/* border-collapse: collapse; // get a single border */
}
td {
padding: 10px;
border: 2px solid yellow;
}
td.black {
background: #000;
color: #fff;
border: 2px solid green;
}
http://jsfiddle.net/pr1d3c5b/
If you want to add just a box-shadow, you can try with this variation (for red color), but it's not precise
-webkit-box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1);
-moz-box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1);
box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 1);
http://jsfiddle.net/pr1d3c5b/1/
You can try this generator http://css3gen.com/box-shadow/ and play with the 'spread' value under the optional settings