<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/apr15-sphere.jpg" alt="">
body { padding: 50px; text-align: center; }
img {
width: 100px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3 */
outline: 5px solid hsl(0, 0%, 60%);
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
/* If you could do pseudo elements
you could get a few more... */
/* Also, HSL is awesome but don't use it if
you need super old browser support */
}
This Pen doesn't use any external CSS resources.