Intro To CSS Shapes

shape-outside: circle();

For this article I would like to talk about CSS Shapes. CSS Shapes allow web designers and developers to wrap content around custom paths, like circles, ellipses and polygons. First of all I would like to thank Bella, one of our cats, for agreeing to act as a model for this demonstration. Before we start, you need to know, if you don't already, that all images, in fact all content on the web is contained in boxes, square or rectangle. You can prove this by bringing up dev tools on your browser ctr + shift + i in Windows, or cmd + alt + i on a mac. Next choose the element picker from the top left of the toolbar and hovering over one of the images of Bella.

Okay now that you have seen with your own eyes that everything is in a box, how did we wrap this text around the images? First of all, because we are using bootstrap 4, we applied the class .rounded-circle to the images. Had we not been using bootstrap 4, we could have given our images a custom class and set the border property of that class to 50%.

Next we give each of the images a class of their own and add the following properties:-

  .bellaL{
     float: left;
     margin-right: 2em;
     margin-bottom: 0.5em;
     max-width: 200px;
     shape-outside: circle();
   }

   .bellaR{
      float: right;
      margin-left: 2em;
      margin-bottom: 0.5em;
      max-width: 200px;
      shape-outside: circle();
    }

The first four properties are probably very familiar to you, we float one of the images left and the other to the right, set their margins and the maximum size we want them to be. The fifth property shape-outside: circle(); may not be so familiar, and is not supported in all browsers at the moment. This is the property that causes the text to flow around the image, ignoring the traditional box. Any browser that does not support shape-outside: circle(); will just wrap the text around the box in the traditional way.

Please note in Firefox layout.css.shape-outside.enabled may be switched off by default. To enable it: Open a new tab, type in about:config, ignore the warning and click I accept the risk; then in the about:config search bar type in "shape". If the value is set to false, double click on the line to toggle it to true. Now close the tab, refresh your page, and everything should be fine.

shape-outside: margin-box;

Shapes can be defined by reference to edges in the CSS Box Model.The margin-box value defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding border-radius and margin values.

shape-outside: margin-box; is only one of the shapes from box values that can be used, The others are shape-outside: border-box;, shape-outside: padding-box; and shape-outside: content-box;

• The border-box value defines the shape enclosed by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border.
• The padding-box value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border.
• The content-box value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.

In this example, with the image floated to the left, we include the properties shape-outside: margin-box; and border-radius: 0 35% 0 35%; We also give it a margin-right: 2em; and a margin-bottom: 0.5em;

The class for this image has been defined as follows:-

  .manL{
     float: left;
     margin-right: 2em;
     margin-bottom: 0.5em;
     max-width: 200px;
     shape-outside: margin-box;
     border-radius: 0 35% 0 35%;
   }