CodePen

HTML

            
              <span><img alt="" src="http://lorempixel.com/320/240/animals" /></span>

<span><img alt="" src="http://lorempixel.com/320/340/animals" /></span>

<span><img alt="" src="http://lorempixel.com/320/260/animals" /></span>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body { text-align: center; }

span {
  background: #AAA;
  border-radius: 2em;
  display: inline-block;
  margin: 1em .5em;
  padding: 1em;
  position: relative;
  box-shadow: 0 0 .25em black;
  vertical-align: middle;
}

span:before {
  border-radius: inherit;
  content: '';
  box-shadow: 0 0 1em #333,inset 0 0 3em white;
  position: absolute;
  left: 1em;
  right: 1em;
  top: 1em;
  bottom: 1em;
}

span > img {
  border-radius: inherit;
  display: block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // http://css-tricks.com/forums/discussion/24409/image-shadow-and-border-without-second-div#Item_6
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................