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.

All labels observed (3)

How this entity was disambiguated

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
linked to: CSS shapes
enables content to flow around non-rectangular shapes
wrapping inline content around custom outlines
implementedIn Chrome
linked to: Google Chrome

Edge (Chromium-based)
linked to: Microsoft Edge

Firefox
linked to: Mozilla Firefox

Safari
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
linked to: CSS shapes
primaryProperty shape-outside
relatedTo CSS Exclusions
CSS Floats
CSS Regions (historical)
linked to: CSS Regions Module
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
status W3C Recommendation
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

How these facts were elicited

Referenced by (3)

Full triples — surface form annotated when it differs from this entity's canonical label.

W3C CSS specifications defines CSS shapes
CSS shapes partOf CSS Exclusions and Shapes Module Level 1
linked to: CSS shapes
CSS shapes definedBy W3C CSS Shapes Module Level 1 specification
linked to: CSS shapes