TIL: CSS box-shadow can fake Win95 bevels

You can recreate the Win95 raised border with just box-shadow:

.raised {
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}

Flip the sign on all four to get the sunken (pressed) variant.

⊞ Start