HTML and CSS

Circular image

How this css code do?

This CSS code styles an HTML element with the class .demo-image to display a circular image that looks like a neatly framed, centered profile picture or avatar.

CSS
.demo-image {
margin: 0 auto;
max-width: 260px;
height: 240px;
width: 240px;
border-radius: 100%;
background-image: url("lion.jpg"); 
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 6px solid #ffffff;
box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 10px;
}
HTML
<div class="demo-image"></div>

Result:

  • You get a 240x240 pixel circular image centered in its container.
  • The image (lion.jpg) fills the circle with no stretching or repeating.
  • There's a white border and a soft drop shadow, giving it a clean, modern look — ideal for profile pictures or thumbnails.