CSS shapes
E662773
CSS shapes are a web design feature that allows content to flow around custom geometric or image-based outlines instead of traditional rectangular boxes.
Statements (49)
| Predicate | Object |
|---|---|
| instanceOf |
CSS module
ⓘ
web design feature ⓘ |
| allows |
non-rectangular float areas
ⓘ
text to wrap around circular images ⓘ text to wrap around irregular silhouettes ⓘ |
| category | layout and visual formatting feature ⓘ |
| compatibleWith | modern web browsers ⓘ |
| definedBy | W3C CSS Shapes Module Level 1 specification NERFINISHED ⓘ |
| enables |
content to flow around non-rectangular shapes
ⓘ
wrapping inline content around custom outlines ⓘ |
| implementedIn |
Chrome
NERFINISHED
ⓘ
Edge (Chromium-based) NERFINISHED ⓘ Firefox NERFINISHED ⓘ Safari NERFINISHED ⓘ |
| improves |
typographic layout around images and figures
ⓘ
visual storytelling in web design ⓘ |
| introducedApprox | mid-2010s ⓘ |
| notFullySupportedBy | older browsers such as Internet Explorer ⓘ |
| partOf | CSS Exclusions and Shapes Module Level 1 NERFINISHED ⓘ |
| primaryProperty | shape-outside ⓘ |
| relatedTo |
CSS Exclusions
NERFINISHED
ⓘ
CSS Floats NERFINISHED ⓘ CSS Regions (historical) NERFINISHED ⓘ |
| requires |
a float for shape-outside to affect inline content flow
ⓘ
an element that establishes a float formatting context ⓘ |
| shapeImageThresholdControls | alpha channel threshold for image-based shapes ⓘ |
| shapeMarginControls | distance between the shape and wrapped content ⓘ |
| shapeOutsideAccepts | basic-shape values ⓘ |
| shapeOutsideAccepts |
box values
ⓘ
image values ⓘ none ⓘ |
| standardizedBy | World Wide Web Consortium NERFINISHED ⓘ |
| status | W3C Recommendation NERFINISHED ⓘ |
| supportsShapeType |
basic geometric shapes
ⓘ
circle shapes ⓘ ellipse shapes ⓘ image-based shapes ⓘ inset rectangles ⓘ polygon shapes ⓘ |
| syntaxExample |
shape-outside: circle(50%);
ⓘ
shape-outside: polygon(0 0, 100% 0, 100% 100%); ⓘ shape-outside: url(image.png); ⓘ |
| useCase |
creating circular avatars with wrapped text
ⓘ
magazine-style text wrapping on the web ⓘ wrapping text around product photos ⓘ |
| usesProperty |
float
ⓘ
shape-image-threshold ⓘ shape-margin ⓘ shape-outside ⓘ |
Referenced by (1)
Full triples — surface form annotated when it differs from this entity's canonical label.