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