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.
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.
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>