Image with arched edges

Arched edges is to introduce the pseudo elements :before and :after, size them relative to the container, and transform: rotate(-10deg);. Setting a hardcoded left and right ensures that the pseudo elements lie on top of where the image's shadow lies.

Arched edge shadows

Source Code:

<!Doctype> <html> <head> <style> .pic { width: 400px; height: 200px; background: url(img/tiger.png) no-repeat; } .shadow { position: relative; } .shadow:before, .shadow:after { position: absolute; z-index: -1; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; -webkit-box-shadow: 0 35px 20px #989898; -moz-box-shadow: 0 35px 20px #989898; box-shadow: 0 35px 20px #989898 ; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } .shadow:after { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); right: 10px; left: auto; } </style> </head> <body> <br> <br> <div class="pic shadow"> </div> </body> </html>

Rounded drop shadow

Here is another CSS technique for creating border shadows and dividers by utilizing curved CSS box shadows, the :before and :after pseudo-elements, and border radius.

CSS curved shadow

Source Code:

<!Doctype> <html> <head> <style> .pic { width: 400px; height: 200px; padding:30px; background:#ccc; margin:20px auto 60px; border-radius:2px; } .shadow{ position:relative; } .shadow:after{ z-index:-1; content:""; position:absolute; -webkit-box-shadow:0 0 40px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 40px rgba(0,0,0,0.8); box-shadow:0 0 40px rgba(0,0,0,0.8); height:20%;left:10%;right:10%;width:80%;bottom:0px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } </style> </head> <body> <br> <br> <div class="pic shadow"> <img src="img/tiger.png"> </div> </body> </html>