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.
Arrow at the bottom
Arrow at the bottom with a utf-8 character
Arrow at the top of a container
Aside
Background color
Blackboard design
Breadcrumbs design
Calendar design
Checkboxes as circular buttons
Checkboxes as toggle switches
Cursor properties
Circular image with a shadow effect
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
Last child and not last child element
Letter spacing
List items with a Font Awesome icon
Neon text
Neon text with a flickering effect
Notebook paper background
Radio buttons as circular buttons
Radio buttons as rating stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design