How do you code a circular image then wrap text around it? - html

Question

What I'm trying to do is wrap text around an image. I have managed to do it with an image but I can't understand how to insert a circle in the HTML. I have added the style:
shape-outside: circle();
but now I just need to add it into the HTML. Can anyone give me any pointers from here? Thans.

Answer 1

Something like this:
Add the element and use border-radius:50% to round the element...then do the same to the image.
Couple of useful references:
CSS-Tricks : Shape-outside
MDN - Shape-outside
.wrap {
margin: 1em auto;
}
.circle {
border-radius: 50%;
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin: 1em;
}
.circle img {
display: block;
border-radius: 50%;
}
<div class="wrap">
<div class="circle">
<img src="http://lorempixel.com/image_output/city-q-c-200-200-2.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, voluptatem numquam earum sapiente quaerat cumque voluptates optio atque, possimus eum rerum. Quasi, quos incidunt ratione aliquam, sapiente veniam obcaecati praesentium vitae, officia
nemo eum? Ipsum molestias odio dicta aliquid facere earum aliquam reprehenderit consequuntur illum distinctio, quisquam amet in eveniet. Possimus, numquam. Cum hic, expedita possimus! Saepe eaque suscipit facere laudantium mollitia culpa corporis
distinctio pariatur! Beatae, aspernatur impedit voluptas accusantium aliquid assumenda. Nostrum inventore laborum repudiandae iste quos officia necessitatibus impedit adipisci aut blanditiis illum dolor debitis accusantium voluptas enim optio, assumenda
quod tenetur natus architecto suscipit consequuntur, dolorem. Error neque, aliquam illum nam sed odit adipisci, et incidunt, modi nihil quibusdam alias ipsum doloribus commodi exercitationem architecto repellendus tempora voluptates? Quaerat quidem
sapiente doloremque culpa earum, maiores cupiditate quos sint, odit nisi, iste qui ut suscipit eligendi! Neque aliquam labore maiores! Soluta, nam enim, tempore adipisci excepturi eos quos. Ad voluptates totam sed nemo ratione dolorem eligendi obcaecati
doloribus debitis, soluta consectetur iure, maiores cupiditate voluptate aliquam laboriosam ipsa deserunt sunt odit rerum molestiae aliquid expedita? Quod animi libero cumque voluptas corporis repellat, laudantium dolores provident doloremque laborum.
Modi expedita minus, autem laborum quia reiciendis animi, ullam voluptates quaerat sunt nesciunt, magnam impedit doloremque dicta. Illo velit sint eius, repellat provident. Nemo officiis amet officia sed placeat inventore iusto aspernatur aliquid
magnam! Ipsam numquam, eveniet laboriosam nostrum, quaerat, deserunt rem illo corporis tenetur maiores iure nam, est quasi repudiandae eligendi quis fugit accusantium repellendus vitae! Molestiae, beatae, consequatur.</p>
</div>