Change border of a single table cell element with border collapse

Question

I want to make a table with several cells. The cells must have exactly an 1px border between them. This is why I'm using border-collapse: collapse. When I :hover on a td element, I want it's (4 side) border to change it's color to red, but this the effects are not always visible. Here is a demo of the problem, it should explain a lot: http://jsfiddle.net/4444a/ I tried to mix position and z-index, but they did not work out well. Is there any pure CSS way to do it efficiently? "Links to jsfiddle.net must be accompanied by code" - HTML: ```

1	2	3
4	5	6
7	8	9

``` CSS: ``` table { margin: 20px; border-collapse: collapse; border-spacing: 0; } td { width: 40px; height: 40px; border: 1px solid black; text-align: center; } td:hover { border: 1px solid red; } ```

Accepted Answer

Inset would do the trick. Change the `td` `border: 1px solid black;` to :

```
td {
  ...
  border: 1px inset black;
  ...    
 }
```

Updated Fiddle example

Change border of a single table cell element with border collapse

Solution

Problem