Round shadow for image with CSS

Question 1

Ok, create a html document and paste the following code :

<html>
<style type="text/css">
.box {
     position: relative;
     width: 400px;
     height: 300px;
     background-color: #fff;
     box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
     border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%;
}
.box:after {
      position: absolute;
      width: 64%;
      height: 12%;
      left: 18%;
      border-radius: 50%;
      z-index: -1;
      bottom: 0%;
      content: "";
      box-shadow: 0 50px 24px rgba(0,0,0,0.24);
}
</style>
<body>
    <div class="box">
    <img src="img.jpg" />
    </div>
</body>
<html>

You have to create a div element inside body and assign the .box class to the div like this :

 <div class="box">
 // put your content here (eg. image or text) and it will be inside the box
 </div>

Thats all.

Question 2

Place the image inside the box, this should create the shadow for the image.

 <div id='DIV' class='box'>
    <img src='imgsrc' /> <!-- place your image here -->
 </div>

Question 3

Image elements do not allow pseudo elements to be placed inside them, therefor you will have to place your image inside a div and then apply the styles to that.

Question 4

If you want to use the same code then you can do this way.

HTML :

<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .box
        {

            position: relative;
            width: 400px;
            height: 300px;
            background-color: #fff;
            box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
            border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
        }
        .box:after
        {
            position: absolute;
            width: 64%;
            height: 12%;
            left: 18%;
            border-radius: 50%;
            z-index: -1;
            bottom: 0%;
            content: "";
            box-shadow: 0 50px 24px rgba(0,0,0,0.24);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <asp:Image ID="Image1" CssClass="box" ImageUrl="YourImagePath" runat="server" />       
    </div>
     <div >
         <asp:Button CssClass="box" ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>

Please change width and height as per your need. I hope this will work for you.