How to Make Border Variations Work

If you want fancy borders to work, use the right colors. Not too dark or too light or it won't work right! Here's the code for the boxes below:

<div style="height:20px">
<div style="position:absolute; width:100px; height:20px;
border:8px groove #888; margin:0 0 0 30%;">groove</div>
<div style="position:absolute; width:100px; height:20px;
border:8px ridge #f88; margin:0 0 0 45%;">ridge</div>
<div style="position:absolute; width:100px; height:20px;
border:8px outset #8f8; margin:0 0 0 60%;">outset</div>
<div style="position:absolute; width:100px; height:20px;
border:8px inset #88f; margin:0 0 0 75%;">inset</div>
</div>