CSS | shape-outside Property - GeeksforGeeks

21 Nov, 2019
The shape-outside property is used to define the shape that the adjacent inline content may wrap around. It can be used to define complex shapes including images that can be used to wrap text around instead of simple boxes.
Syntax:
shape-outside: <basic-shape> | <shape-box> | <image> | none |  initial | inherit
Property Values:
basic-shape: It is used to define the shape that should be used to calculate the float area. The shape can be created using one of the supported functions:circle(): It is used to make circular shapes.ellipse(): It is used to make elliptical shapes.inset(): It is used to make rectangular shapes.polygon(): It is used to make shapes that have more than 3 vertices.path(): It is used to create shapes which have lines, arcs or curves. Example 1: This example implements the circle() function.<!DOCTYPE html><html><head>  <title>    CSS | shape-outside  </title>  <style>    .outline {      shape-outside: circle(25%);        width: 100px;      height: 200px;      float: left;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | shape-outside  </b>  <p>    shape-outside: circle(25%)  </p>  <div class="outline">  </div>  <div class="container">    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.    <br><br>    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.  </div></body></html>Output:Example 2: This example implements the inset() function.<!DOCTYPE html><html><head>  <title>    CSS | shape-outside  </title>  <style>    .outline {      shape-outside: inset(50px 50px);              width: 150px;      height: 150px;      float: left;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | shape-outside  </b>  <p>    shape-outside: inset(50px 50px)  </p>  <div class="outline">  </div>  <div class="container">    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.    <br><br>    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.  </div></body></html>Output:
circle(): It is used to make circular shapes.
ellipse(): It is used to make elliptical shapes.
inset(): It is used to make rectangular shapes.
polygon(): It is used to make shapes that have more than 3 vertices.
path(): It is used to create shapes which have lines, arcs or curves.
 Example 1: This example implements the circle() function.
<!DOCTYPE html><html><head>  <title>    CSS | shape-outside  </title>  <style>    .outline {      shape-outside: circle(25%);        width: 100px;      height: 200px;      float: left;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | shape-outside  </b>  <p>    shape-outside: circle(25%)  </p>  <div class="outline">  </div>  <div class="container">    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.    <br><br>    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.  </div></body></html>
Output:
Example 2: This example implements the inset() function.
<!DOCTYPE html><html><head>  <title>    CSS | shape-outside  </title>  <style>    .outline {      shape-outside: inset(50px 50px);              width: 150px;      height: 150px;      float: left;    }  </style></head><body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | shape-outside  </b>  <p>    shape-outside: inset(50px 50px)  </p>  <div class="outline">  </div>  <div class="container">    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.    <br><br>    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.  </div></body></html>
Output:
shape-outside: It is used to define which one of the box model is used for positioning inside the shape. These values are used after the shape value is defined. There are 4 values that can be used:margin-box: It is used to define the shape that is enclosed by the outside margin edge. The corner radii is determined based on the border-radius and margin values. This is the default value that would be used.border-box: It is used to define the shape that is enclosed by the outside margin edge. The default border radius shaping rules are followed.padding-box: It is used to define the shape that is enclosed by the outside padding edge. The default border radius shaping rules are followed.content-box: It is used to define the shape that is enclosed by the outside content edge.  
margin-box: It is used to define the shape that is enclosed by the outside margin edge. The corner radii is determined based on the border-radius and margin values. This is the default value that would be used.
border-box: It is used to define the shape that is enclosed by the outside margin edge. The default border radius shaping rules are followed.
padding-box: It is used to define the shape that is enclosed by the outside padding edge. The default border radius shaping rules are followed.
content-box: It is used to define the shape that is enclosed by the outside content edge.
  
image: It is used to specify the image of which the alpha value would be extracted to compute the float area. The url() function can be used to define the image. A gradient can also be used in place of the image.Example:<!DOCTYPE html><html>  <head>  <title>    CSS | shape-outside  </title>  <style>    .outline {      shape-outside: url("https://media.geeksforgeeks.org/wp-content/uploads/20191118233732/circle-img1.png");        background: url("https://media.geeksforgeeks.org/wp-content/uploads/20191118233732/circle-img1.png") no-repeat;      width: 150px;      height: 150px;      float: left;    }  </style></head>  <body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | shape-outside  </b>  <p>shape-outside: url()</p>  <div class="outline">  </div>  <div class="container">    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.    <br><br>    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.  </div></body>  </html>Output:  
Example:
<!DOCTYPE html><html>  <head>  <title>    CSS | shape-outside  </title>  <style>    .outline {      shape-outside: url("https://media.geeksforgeeks.org/wp-content/uploads/20191118233732/circle-img1.png");        background: url("https://media.geeksforgeeks.org/wp-content/uploads/20191118233732/circle-img1.png") no-repeat;      width: 150px;      height: 150px;      float: left;    }  </style></head>  <body>  <h1 style="color: green">    GeeksforGeeks  </h1>  <b>    CSS | shape-outside  </b>  <p>shape-outside: url()</p>  <div class="outline">  </div>  <div class="container">    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.    <br><br>    GeeksforGeeks is a computer science    portal with a huge variety of well    written and explained computer science    and programming articles, quizzes and    interview questions. The portal also    has dedicated GATE preparation and    competitive programming sections.  </div></body>  </html>
Output:
  
none: It is used to set the property to have no float area. The inline content wraps around the margin-box as default.  
  
initial: It is used to set the property to its default value.  
  
inherit: It is used to set the property to inherit from its parent.
Supported Browsers: The browsers supported by shape-outside property are listed below:
Chrome 37
Firefox 62
Safari 10.1
Opera 24
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript