Skip to content
Related Articles

Related Articles

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(
    );
      
          background: url(
    ) 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:
    image

  •   

  • 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
My Personal Notes arrow_drop_up
Recommended Articles
Page :