How to draw a "smart" border in Javascript / CSS?

Question

I mean something like this (look at the kids playing soccer tile). See how it increases the brightness of each pixel of the arbitrary picture? How do I do that with jQuery and/or CSS?

Answer 1

One option is to kind of fake it with a very small inset box shadow:

 box-shadow: inset 0px 0px 5px 0px #ffff66;

Click here for an example.

Answer 2

Take a look at this: jsFiddle. Using a white-transparent border and the image starting at the same position as the border does the trick.