Custom Css property "shape-outside" not working

Design help Custom code
1

Hi there,

I was just looking at the custom CSS update, and can’t get the shape-outside property to work.

What am I missing ?

Here is my site Read-Only: [LINK](Webflow - testsite)
(how to share your site Read-Only link)

2

Hello @Xavier

shape-outside is a CSS property used to define a shape around which inline content should wrap. However, shape-outside alone doesn’t create a shape; it requires another property like clip-path or float to work effectively.

If you’re seeing shape-outside not having any effect without clip-path, it might be because clip-path is necessary to define the shape that the content should wrap around. clip-path clips an element to a basic shape or to an SVG. It can be used to create more complex shapes than shape-outside alone.

Here’s a basic example of how shape-outside works with clip-path:

.shape {
        float: left;
        width: 200px;
        height: 200px;
        background: lightblue;
        clip-path: circle(50%);
        shape-outside: circle(50%);
    }

Here is the custom CSS in your project.

image
image2260×1712 360 KB

3

Thanks a lot, I hadn’t set the float on the round div :+1:

1 Like