• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Image Shapes Quiz

Q1: Which property rounds image corners?

A. clip-path
B. border-radius
C. shape-outside
D. float

Q2: What does clip-path: circle(50%) do?

A. Clips the image into a circle shape
B. Clips the image into a square
C. Sets image opacity
D. Adds border radius

Q3: Which property allows custom polygon shapes?

A. border-radius
B. clip-path: polygon()
C. shape-outside
D. object-fit

Q4: What is shape-outside used for?

A. Clipping images
B. Controlling text wrap around shapes
C. Setting image size
D. Applying filters

Q5: Which is NOT a valid value for clip-path?

A. circle()
B. ellipse()
C. blur()
D. polygon()

Q6: How to make an image circular if it is not square?

A. Use clip-path: circle(50%) only
B. Use shape-outside
C. Make width and height equal + border-radius: 50%
D. Use float: circle

Q7: Which method supports the most complex shapes?

A. border-radius
B. shape-outside
C. SVG clip paths
D. opacity

Q8: What is the effect of clip-path: inset(10%)?

A. Rounds corners
B. Clips inside rectangle with 10% inset margins
C. Creates circle
D. Adds margin

Q9: Can clip-path be animated?

A. No
B. Yes, with CSS animations or transitions
C. Only with JavaScript
D. Only in SVG

Q10: Which property affects how text flows around a floated image?

A. clip-path
B. shape-outside
C. border-radius
D. float
← Previous Next →
Login
Go Back Top