Syntex

Formal syntax: <basic-shape> | <image> | <shape-box> | none

shape-outside: none

shape-outside: initial
shape-outside: inherit
shape-outside: unset

shape-outside: margin-box

shape-outside: content-box
shape-outside: border-box
shape-outside: padding box

shape-oustide: inset()
shape-outside: circle()

shape-outside: ellipse()
shape-outside: polygon()

shape-outside: url(image.png)

 shape-outside: circle();

<h1>The Chilly-warmer</h1>
<img src="image.png" class="o" />
<p>Ought not you, children, to be more covered 
over than you are? Jack, instead of being so 
entirely wrapped up in yourself, suppose you pay 
a little attention to your sister, and wrap her up 
in those warm eiderdown rugs I purchased in 
Norway. Dear me! How could I possibly have 
forgotten it? I have just the thing to make us all 
comfortable. Do you see this round thing, 
something like a china cannonball? It is called 
The Chilly-warmer. I take two small bottles of 
a chemical preparation that I carry in my pocket, 
and pour a few drops of each into these two tiny 
holes you see at the side. These liquids meet 
together inside the apparatus, and immediately, 
by their action one upon another, they make the 
Chilly-warmer so warm, that even at a good 
distance off you can feel it like a cosy fire.</p>

.o {
  float: right;
  shape-outside: circle();
  max-width: 200px;
  width: 50%;
}

/* You can set the radius of the circle 
in the first argument of the circle()

shape-outside: circle(50%); */

<basic-shape>

 shape-outside: ellipse();

<h1>ROME</h1>
<img src="image.png" class="rome" />
<p>Below us is the far-famed city of Rome, 
the most celebrated city in the whole world. 
In old times the Romans were the conquerors 
of the world, and their city was the chief capital 
of their empire. When it was most flourishing 
its walls extended for 13 miles round, and its 
population amounted to 2,000,000. It has 
now dwindled down very much, and, while 
still the capital of Italy, its population only 
amounts to 250,000, about the same number 
as dwell at Leeds; and four of the seven hills 
upon which it was built,and which were thickly 
crowded with houses, are now occupied only 
by vineyards and gardens.</p>

.rome {
  float: right;
  shape-outside: ellipse();
  max-width: 200px;
  width: 50%;
}
/* We can make an oval of a different 
size in the same way as defining a circle 
radius, just with two values: 
One for the width and a second for the height:

shape-outside: ellipse(25% 10%); */

<basic-shape>

 shape-outside: polygon();

<h1>Austria</h1>
<img src="image.png" class="austria" />
<p>o you notice, as we rise over Venice, 
        what a number of bridges and canals 
        there are? It is a wonder- ful city, and 
        we are very sorry to leave it; but we 
        have to hurry on, as mamma is anxious 
        to see us home again.</p>
  <p>We are going to sail to Trieste, 
        the great a seaport of Austria, and as
         we move through the air, I will tell 
        you about the country, if you make 
        yourselves cosy in the carpet.</p>
  <p>Austria, or, to speak more accurately, 
        the Austro-Hungarian Empire, is about 
        800 miles long, and 500 miles broad. 
        In area it is 250,000 square miles in 
        size, three-fourths of it being mountainous. 
        The frontier line is 4000 miles.</p>
  <p>It is bounded on the North by Prussia 
        and Russia ; by Turkey, the Adriatic, and
         Italy, Switzerland, and Norway on the
         West. It is divided into seventeen divisions, 
        called Crown Lands (Krönlander), and a 
        military frontier.</p>
  <p>These, again, are divided into two grand
         sections : the Cisleithan countries, or 
        Austria ; the Transleithan, or Hungary.</p>

.austria {
  float: left;
  shape-outside: polygon(88% 0, 
        90% 15%, 83% 22%, 93% 31%, 
        100% 36%, 72% 73%, 35% 75%, 
        19% 100%, 0 100%, 0 0);
  shape-margin: 10px;
}
/* You define polygons by setting coordinates 
for each point. The coordinates can be in pixels 
or in percentages. 
shape-outside: polygon(x1 y1, x2 y2, x3 y3); */

<basic-shape>

 shape-outside: url(image.png);

<h1>Britain</h1>
<img src="image.png" class="b" />
   <p>EFORE we go anywhere else,
         we must first have a look at 
        our own dear native land.</p>
   <p>Many people pack up their 
        boxes and trunks, and rush 
        off to see other countries, 
        without knowing anything
         about the land in which they
        live. They can tell long stories 
        of what they have seen in Italy
         and France; but when you come 
        to ask them about their own
         country, they cannot say anything, 
        We will take care, my little one, not 
        to be like them. What is the name 
        of the country in which we live?</p>
  <p>It is called England, and when
         Scotland and Wales are added to it, 
        it goes by the name of Great Britain.</p>
  <p>Now look for it on the map. Here it 
        is on the left hand. You will notice that
         the water goes all around it; it is therefore 
        called an island. We are not going to speak 
        of the whole island, however, just at
         present.</p>
  <p>By-and-by we shall visit Scotland
         and Wales. We must keep just now
         only to England. Does it not look a tiny 
        place? It is only 400 miles long, and 360 
        miles broad; yet it is very dear to us, 
        because it is our home. Although it is 
        so small, English people have found 
        their way all over the world. England is
        a great motherland. She has many children
        in places called Colonies, all of which 
        look up to her with love and respect, 
        as they have sprung from her.</p>

.b {
  float: left;
  shape-outside: url(image.png);
  shape-image-threshold: 0.0;
  shape-margin: 10px;
}
/* The shape-image-threshold defines the level 
of opacity you’re wanting to pick up. 0.0 is fully
 transparent while 1.0 is fully opaque. */

<image>

The blue area is the margin-box. This is made up of the margin of the element and is outside the element’s boundary.

The black area is the border-box. In the case of the example above, we’ve got a border of 2px.

The orange area is the padding-box. This is the area that surrounds your content (e.g. our image).

The image itself is in the content-box. This is the box area that holds our image.

shape-outside: margin-box;
shape-outside: border-box;
shape-outside: padding-box;
shape-outside: content-box;

<shape-box>

shape-outside: margin-box;

.box-margin {
  border-radius: 150px;
  float: left;
  margin: 5px;
  shape-outside: margin-box;
  max-width: 400px;
  width: 70%;
  border: 10px solid red
}

<shape-box>

shape-outside: border-box;

.box-border {
  border-radius: 150px;
  float: left;
  margin: 5px;
  shape-outside: border-box;
  max-width: 400px;
  width: 70%;
  border: 10px solid red
}

<shape-box>

shape-outside: padding-box;

.box-padding{
  border-radius: 150px;
  float: left;
  margin: 5px;
  padding: 5px;
  shape-outside: padding-box;
  max-width: 400px;
  width: 70%;
  border: 10px solid red
}

<shape-box>

shape-outside: content-box;

.box-content {
  border-radius: 150px;
  float: left;
  margin: 5px;
  padding: 5px;
  shape-outside: content-box;
  max-width: 400px;
  width: 70%;
  border: 10px solid red
}

<shape-box>

END

CSS Shapes