v149 · CSS · demo

Shape Parity

The same rect() or xywh() value now works in both clip-path and shape-outside. Chrome 149 closes the gap — one shape definition can drive both the visual boundary of an element and the text exclusion zone around it.

Both properties use the same value:
clip-path visual clip

Clips the element's rendered output to the shape boundary. Pixels outside the shape are not painted.


      

    


    

      

        shape-outside
        text exclusion
      

      

        
Defines the float exclusion zone. Text in adjacent content reflows around this shape boundary. Chrome 149 added rect() and xywh() here.

        

        

          

          
Text wraps around the green float using the same shape value. The exclusion zone matches the clip applied to the blue box on the left — one value, two properties.

        

        

      

    


  


  

    
the syntax

    

      
rect(top right bottom left)

      
Edge offsets from the reference box. Identical semantics to inset() but each side is named. Supports auto for any side.

      
xywh(x y width height)

      
Origin (top-left corner offset) + explicit dimensions. More natural when you're thinking in terms of a positioned box rather than distances from each edge.

    

  


  

  

    
references

    
  



    
implementation reference

    
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗