CSS - <shape-box>

Shapes can be specified for shape-outside with a <shape-box> type, which is a reference to edges in the CSS Box Model

Description  

Shapes can be specified for shape-outside with a <shape-box> type, which is a reference to edges in the CSS Box Model

See Also  

Specifications  

Specification Status Comment
CSS Shapes Module Level 1
The definition of '<shape-box>' in that specification.
Candidate Recommendation Initial definition.

Possible Values

margin-box

Defines the shape enclosed byt the outside margin edge. The corner radii of this shape are determined by the corresponding border-radius and margin values. If the border-radius / margin is 1 or more, then the margin box corner radius is border-radius + margin. If the ratio of border-radius / margin is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3)).

border-box

Defines the shape enclosed by the outside border edge. This shape follows the normal border radius shaping rules for the outside of the border.

padding-box

Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

content-box

Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.

Examples

TODO

Browser Compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) Not supported Not supported Not supported (Yes)
\xx (Yes) Not supported Not supported Not supported (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) Not supported Not supported Not supported (Yes)
\xx (Yes) (Yes) Not supported Not supported Not supported (Yes)

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/shape-box