สมมติเรามี HTML ดังข้างล่างนี้

1<div class="circle"></div>
2<p>Lorem Ipsum is simply....</p>

พร้อม CSS สำหรับแต่งคลาส circle ของเราให้เป็นวงกลมสีแดง

1.circle {
2  width: 150px;
3  height: 150px;
4  float: left;
5  background-color: red;
6  border-radius: 50%;
7  margin-right: 1rem;
8}

ผลลัพธ์จากการทำงานออกมาเป็นดังภาพนี้

แม้ border-radius ที่ระบุจะช่วยให้ .circle ของเราแสดงผลเป็นวงกลม แต่ข้อความโดยรอบก็ยังคงไหล ตามความเป็นกล่องสี่เหลี่ยมรอบ ๆ .circle อยู่ดี

shape-outside เป็น CSS property สำหรับกำหนดรูปร่าง เพื่อให้เนื้อหาโดยรอบไหลรอบอีลีเมนต์ของเรา โดยไม่จำเป็นต้องมีรูปร่างเป็นสี่เหลี่ยมอีกต่อไป หากเราต้องการนิยามรูปร่างให้เป็นวงกลม เพื่อให้เนื้อหาโดยรอบไหลแบบ ห่อหุ้มอีลีเมนต์เราในลักษณะของวงกลม เราสามารถใช้ฟังก์ชัน circle ช่วยได้ ดังนี้

1.circle {
2  shape-outside: circle(50%);
3  width: 150px;
4  height: 150px;
5  float: left;
6  background-color: red;
7  border-radius: 50%;
8  margin-right: 1rem;
9}

และนี่คือโค้ดทั้งหมดของเรา