Custom Background Frame for Images

Hi,

Maybe someone can help me understand how does sites like this did to present the portfolio images:
http://www.elegantthemes.com/gallery/category/responsive/
I mean the images are inside a sort of browser mockup and many websites are doing the same to present templates and webdesign work.
I'm quite good in CSS and html but I need to understand:
1/ Why do they present the images inside the browser using CSS and not creating all the images on photoshop with the frame browser as it looks more simple?
2/ I find their solution more elegant with separate custom frame from image in CSS. But how to achieve this in WordPress?

Do they use a custom frame for each image via shortcodes? Or only CSS? I'm curious to learn and share some tutorials links are welcome here.

I strangely haven't found a lot of resources on the web about how to create a custom frame background in wordpress.

See also this site is using the same approach:
http://www.woothemes.com/

Fantastic webdesign results!!