Curvy wrapping with CSS Shapes

I thought it was pretty impressive when CSS styles were developed that let you make a shape or a photo with curves on the corners, or a circle.

Eric Meyer discusses how to implement and use CSS Shapes in a responsive layout over at A List Apart, in an article entitled A Redesign with CSS Shapes.

Now there's a feature that lets you wrap the text around your circular object. It's called CSS Shapes. At the moment it is only supported by WebKit browsers, but you can still display your text using old-style wrapping in non-WebKit browsers.



Here's the CSS:

img.bubble.left {

float: left; margin: 0 40px 0 0 ;
shape-outside: circle(150px at 130px 130px); 

}
img.bubble.right {

float: right; margin: 0 0 0 40px;
shape-outside: circle(150px at 170px 130px); 

}

Here are some more examples of CSS Shapes on CodePen.