CSS | shape-outside Property

Last Updated : 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:
circle

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:
inset

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.

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> 