• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Image Shapes

← Previous Next →

🔹 What are CSS Image Shapes?

CSS Image Shapes allow you to define the visual shape and clipping of images beyond the default rectangle. You can create circles, ellipses, polygons, or even custom shapes to make layouts more creative and engaging.

🔸 Common Techniques for Shaping Images

1. Using border-radius for Circles and Rounded Shapes
img.circle {
  border-radius: 50%;
}

This makes the image perfectly circular if it’s square or rounded if rectangular.

2. Using clip-path for Custom Shapes

The clip-path property allows complex shapes like polygons, circles, and ellipses.

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

This clips the image into a triangle.

3. Using shape-outside for Text Wrapping

shape-outside controls how text wraps around a floated image.

img.float-shape {
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
  margin-right: 20px;
}

Text wraps around the circular image shape.

4. Using SVG Clip Paths for Complex Shapes

You can define SVG shapes and reference them in CSS.

img {
  clip-path: url(#my-clip);
}

This requires inline SVG in HTML.

Practice Questions

Q1. Make an image perfectly circular using border-radius.

Q2. Clip an image into a triangle using clip-path: polygon().

Q3. Create an elliptical image shape using clip-path: ellipse().

Q4. Wrap text around a circular image using shape-outside.

Q5. Clip an image into a star shape using clip-path.

Q6. Use clip-path to create a hexagon image shape.

Q7. Create an image with rounded corners of 25px radius.

Q8. Float an image with shape-outside: inset().

Q9. Create an oval profile picture using border-radius and clip-path.

Q10. Use SVG clip path to create a heart-shaped image.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top