border:outset; only working in firefox

问题

i have a table on this page with the following css (each td has the class box)

.box{
    border: 3px outset #959595;
    width:25px;
    height: 25px;
    background-color: #dddddd;
    cursor: pointer;
}

table{
    border-collapse: collapse;
    border-spacing: 0px;
    border: 4px inset #444;
}

i get what i want in firefox

but in any other browser it doesnt seem to be working as i want it to

回答1:

From MDN's documentation on border-style (re: outset):

Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

Your table has border-collapse: collapse;, so it's actually rendering as border-style: ridge in Firefox.

Either set border-collapse: separate; or set border-style: ridge; to normalize the style across browsers that may not be changing outset to ridge.

来源：https://stackoverflow.com/questions/19137342/borderoutset-only-working-in-firefox