Welcome to Part 29 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Shapes & Wrapping Text.

Normally, when you float an element (like a circular profile image), adjacent text wraps around it in a rectangular block, leaving awkward empty gaps at the corners. CSS Shapes allows you to declare geometric boundaries (like circles, ellipses, or custom polygons) on floated elements, forcing inline text to flow and wrap dynamically along the exact curves of the shape boundary.

---

Chapter 157: Declaring Wrapping Paths (shape-outside)

The shape-outside property defines the shape boundary that adjacent text wraps around.

• Requirement: CSS Shapes only apply to floated elements (float: left or float: right) that have defined height and width dimensions.

[1] Circle Boundary (circle())

.profile-img {
  float: left;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* Text wraps in a curve around the image circle */
  shape-outside: circle(50%);
}

[2] Polygon Boundary (polygon())

Allows wrapping text around custom angles:

.angled-aside {
  float: right;
  width: 200px;
  height: 300px;
  /* Text flows diagonally along the polygon edge */
  shape-outside: polygon(100% 0, 0 100%, 100% 100%);
}

---

Chapter 158: Spacing & Thresholds

[3] Shape Margin (shape-margin)

Adds whitespace padding between the shape boundary and the wrapping text (works like margin but follows the curve):

• shape-margin: 15px; (places a 15px gap around the circle/polygon track).

[4] Image Threshold (shape-image-threshold)

Allows wrapping text around the transparency channel of an image file (like a PNG). The threshold defines the opacity alpha limit:

.logo-wrap {
  float: left;
  width: 100px;
  height: 100px;
  background-image: url('star-logo.png');
  shape-outside: url('star-logo.png');
  /* Text wraps around pixels that have an opacity greater than 50% */
  shape-image-threshold: 0.5;
}

---

Chapter 159: Shapes Practice & Self-Check

[1] Practice Exercises

1. Exercise 1: Circular Avatar Text Wrap: Style a circular author card where paragraph text flows along the avatar’s circular border.

   .author-float-avatar {
     float: left;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     shape-outside: circle(50% at center);
     shape-margin: 10px;
   }

[2] Self-Check Questions

1. What condition must be met for CSS shapes to compile on an element?
   • Answer: The element must be floated (float: left or right) and have defined width/height.
2. Which property defines the shape text wraps around?
   • Answer: shape-outside.
3. What property adds spacing between text and the shape path?
   • Answer: shape-margin.
4. What does shape-image-threshold do?
   • Answer: It specifies the opacity threshold (0 to 1) for wrapping text around image transparent shapes.
5. Can shape-outside be used on flex items?
   • Answer: No, it is ignored on flex and grid children (it requires float layouts).
6. Does border-radius: 50% automatically wrap text in a circle?
   • Answer: No, it clips the background visually, but text wraps around the rectangular boundary box unless shape-outside: circle() is set.
7. What is the default value of shape-margin?
   • Answer: 0.
8. What does shape-outside: inset() do?
   • Answer: It defines a rectangular wrapping inset offset inside the box boundaries.
9. What coordinates does polygon() take?
   • Answer: X and Y percentage coordinates relative to the element box.
10. Does shape-outside affect the element’s visual rendering?
    • Answer: No, it only changes how adjacent inline text wraps around it. The element visual shape is handled by properties like clip-path or background styles.