? Image Shapes in CSS

CSS lets you create different shapes for images beyond just rectangles. You can use properties like border-radius, clip-path, and more to transform the shape of an image.

1. Rounded Corners (Circle, Oval, Rounded Rectangles)

Circle

Make a square image perfectly round:

img {  width: 150px;  height: 150px;  border-radius: 50%;  object-fit: cover; /* Ensures the image covers the shape */}

Oval

For rectangular images:

img {  width: 200px;  height: 150px;  border-radius: 50% / 30%; /* elliptical rounding */  object-fit: cover;}

Rounded Rectangle

img {  border-radius: 15px;}

2. Using clip-path for Complex Shapes

clip-path can clip an image into various shapes such as polygons, circles, ellipses, etc.

Circle

img {  clip-path: circle(50%);  width: 150px;  height: 150px;  object-fit: cover;}

Ellipse

img {  clip-path: ellipse(70% 50% at 50% 50%);}

Polygon (e.g., hexagon)

img {  clip-path: polygon(    25% 0%, 75% 0%,     100% 50%, 75% 100%,     25% 100%, 0% 50%  );}

3. Using CSS Shapes with SVG Masks (Advanced)

You can use SVG masks or shapes to create custom image shapes, but this requires SVG knowledge.

4. Other Tips

• Use object-fit: cover; to make sure the image fills the shaped container nicely without distortion.

• overflow: hidden; on a parent container works well with border-radius if image sizes vary.

• Combine with shadows or borders for more stylish effects.

Example: Circular Avatar

<img src="avatar.jpg" alt="Avatar" class="avatar">

.avatar {  width: 120px;  height: 120px;  border-radius: 50%;  object-fit: cover;  border: 3px solid #3498db;}

Want me to generate some cool CSS code snippets for different image shapes or help you apply shapes to your images?