Long blocks of text can be difficult to read, especially on a screen. Readers are more likely to stay engaged when text is broken up with images, spacing, or other design elements.
If you want text to flow naturally around an image, not just in a rectangle but along its actual outline (like a circle, polygon, or custom shape). This can be done with CSS clip-path and CSS Shapes.
This not only breaks up the text visually, it also creates a more dynamic layout that keeps the reader interested.
A step by step guide
1. Add Your Image in a Joomla Article
- Open the Joomla editor and insert your image where you want it in your article.
- Give the image a custom class so you can target it with CSS. For example:
<img src="/images/sample.jpg" alt="Custom Shape Example" class="clip-shape" />
2. Generate a Clip Path
To avoid guessing coordinates, use an online tool:
Go to Clip Path Generator.
- Upload your image or use a similar shape as a guide
- Draw the polygon or curve around your image until you are happy with the outline
- Copy the generated CSS code, it will look something like this:
clip-path: polygon(20% 10%, 80% 5%, 100% 50%, 80% 95%, 20% 90%, 0% 50%);
3. Apply the Clip Path in Joomla
Now add custom CSS. You can do this in:
- The template stylesheet (usually in
/templates/yourtemplate/css/user.css)
Here is an example:
.clip-shape {
float: left; /* or right depending on layout */
width: 300px; /* adjust as needed */
clip-path: polygon(20% 10%, 80% 5%, 100% 50%, 80% 95%, 20% 90%, 0% 50%);
shape-outside: polygon(20% 10%, 80% 5%, 100% 50%, 80% 95%, 20% 90%, 0% 50%);
shape-margin: 10px; /* adds spacing between text and shape */
}
Important Details
Expand each item for a more indepth explanation of each point
clip-path makes the image visually clipped.
- This property actually hides parts of the image outside the polygon you defined. The result is that the picture looks like it has an irregular outline.
- Without
clip-path, the image will still display as a rectangle, even if the text wraps differently. - Example: If you only use
shape-outsidewithoutclip-path, the text will flow around the polygon shape, but the rectangular corners of the image will still be visible, which looks broken.
shape-outside tells the browser how text should wrap around the element.
- Unlike
clip-path,shape-outsidedoes not visually cut the image. Instead, it creates a wrap boundary that text respects. - Think of it like drawing a polygonal fence around the image. Text will not cross inside the fence.
- You can use the same polygon values as
clip-pathto make the visible clipping and the text wrapping line up perfectly.
Use the same polygon values for best results.
- If you use different polygons for
clip-pathandshape-outside, you might get odd mismatches. The text could wrap tightly but parts of the image might stick out, or vice versa. - The cleanest workflow is to generate one polygon and apply it to both properties.
- Some designers do intentionally use slightly different values (for example, making
shape-outsidea bit larger withshape-margin) to give the text some breathing room.
The element must be floated for shape-outside to work.
- By default, text only wraps around floated elements. If you do not set
float: left;orfloat: right;on the image, the browser will not know how to make text flow beside it. - Without float, the text will just stack above or below the image, like normal block elements, and the shape boundary will have no effect.
- That is why
floatis required, it activates the text wrapping behavior.
shape-margin adds spacing between text and shape.
- Without this, text can hug the clipped edge too closely, which makes it look cramped.
shape-margincreates a buffer zone around your polygon. For example,shape-margin: 10px;means "leave 10px of empty space around the shape before text starts".- This property is very useful for readability.
4. Check Responsiveness
If your image resizes on smaller screens, your polygon percentages will scale with it (since they are defined in percentages). This keeps the shape consistent across devices.
5. Browser Support
- Works in modern browsers (Chrome, Firefox, Safari, Edge)
- Internet Explorer does not support
clip-pathorshape-outsidebut who cares about IE in 2025 - Always test across devices
Some examples
Here is how your article might look using this technique:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lectus nisi, consectetur non efficitur vel, tempus ac urna. Curabitur at dapibus metus. Ut sodales quam dolor, ac molestie sapien efficitur eget. Etiam at pretium nulla, molestie rhoncus arcu. Cras vel pellentesque nibh. Phasellus hendrerit lacinia tempus. Donec bibendum ullamcorper cursus. Aliquam sed mattis enim. Pellentesque posuere egestas sem in placerat. Nulla eleifend lacinia orci, vitae aliquam metus semper et.
Curabitur ut fermentum dolor. Maecenas pharetra ultricies odio id vestibulum. Nulla nec ligula accumsan, vestibulum mi sit amet, venenatis nunc. Pellentesque tempus et lectus sit amet aliquam. Pellentesque eleifend vitae mauris at aliquam. Vestibulum placerat risus nisl, vitae iaculis leo imperdiet ut. Praesent cursus ac eros in dapibus. Fusce non ornare tellus. Cras mattis nibh vel maximus malesuada. Sed vitae mauris in orci mattis volutpat eget in massa. Integer tempor lorem in leo pellentesque, eu pharetra erat consectetur. Nunc lacus lorem, iaculis ut neque nec, lobortis dignissim ex. Sed sagittis sem ac congue posuere. Quisque consectetur mauris ac augue auctor, at porta lacus efficitur.
Donec non imperdiet sapien. Duis velit mi, blandit non ligula vitae, placerat posuere mi. Nam ut egestas felis. Sed ut dictum ligula, sit amet cursus ex. Nunc rhoncus, dui ut dignissim ornare, purus augue viverra diam, sit amet semper enim nisi non nibh. Nunc sed turpis mattis, tempor lacus id, imperdiet nunc. Nulla at eros felis. Vivamus sagittis pulvinar metus. Cras sollicitudin lobortis aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent in neque non tortor posuere fringilla. Vestibulum a volutpat neque, a volutpat neque. Mauris quis lobortis sem. Aliquam placerat scelerisque cursus.
Vivamus finibus lacus eu urna fermentum, sit amet elementum libero vehicula. Donec convallis sit amet risus eget tincidunt. Sed commodo, libero et interdum viverra, massa risus semper tellus, vel bibendum felis sem sed libero. Donec bibendum turpis ut urna congue, vitae sagittis neque lobortis. Duis non massa lorem. Aenean fringilla ante urna, nec scelerisque purus pharetra sit amet. Praesent in commodo ligula. Curabitur massa ex, tincidunt at mi semper, ultrices ullamcorper purus. Etiam a magna elit. Phasellus pulvinar, sapien varius sagittis scelerisque, tellus lorem porttitor ante, ac sagittis felis nisi sed nunc. Sed luctus id eros sed malesuada. Nam eleifend elementum lorem sed ultricies. Sed non commodo risus, vitae varius erat. Nam egestas rhoncus placerat. Cras sed scelerisque odio. Mauris vitae quam at libero porta efficitur.
Additional Resources
- Clip Path Generator (create your custom shapes visually)
- CSS Shapes Tutorial by Nick Eubank (explains how text wrapping works in detail)
