CSS | shape-outside Property

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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    circle

    Example 2: This example implements the inset() function.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.