Now let's style an image to look like a circle. This is the same
principal as shown in Border Radius, but
by setting a radius of 50%, it will make a square image appear round. We'll also add a
border and a nice drop shadow. Our image is 400px x 400px. Because we also want this image to
contract in size on smaller devices, we first have to place the image
into a <div> where we can control the width of the box.
The Circle Image
css for the box
.photoblock {
display: block;
padding: 10px;
margin: 10px auto; /* to center the box */
max-width: 500px; /* set the maximum width of the box */
text-align: center; /* centers the box content */
background-color: #aba873;
background: radial-gradient(#aba873, #625d30);
}
css for the image
.photoblock img {
max-width: 100%; /* a percentage will contract on smaller
devices */
height: auto; /* keeps the height proportional to the width
*/
border: 10px solid #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
/* below the corners are rounded to half of the image width
to make the circle*/
