Creating a Fuzzy Border in CSS 3

Question

Here\'s my source image:

And my source image zoomed in:

Answer 1

It's just using two box shadows, one inset and the other outset, i.e:

.box {
  width: 100px;
  height: 100px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
  border: solid #ccc 1px;
  border-radius: 10px;
  margin: 50px 0 0 50px;
}

See it here: http://jsfiddle.net/WYLJv/