Menu Samaritan's Purse

MASK-ORIGIN

The mask-origin property specifies the mask positioning area for elements rendered as a single box.

It specifies which boxes box-decoration-break operates on to determine the mask positioning area for elements rendered as multiple boxes.

SYNTAX

CSS

mask-origin: value;

JS

object.style.maskOrigin = "value";

VALUES

<'mask-origin'> = <geometry-box>#
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
<shape-box> = <box> | margin-box
<box> = border-box | padding-box | content-box
border-box

Area within the border box.

padding-box

Area within the padding box.

content-box

Area within the content box.

margin-box

Area within the margin box.

fill-box

Uses the object bounding box as a reference box.

stroke-box

Uses the stroke bounding box as a reference box.

view-box

Uses the nearest SVG viewport as a reference box.

INITIAL

border-box

EXAMPLES

BORDER-BOX

CONTENT-BOX

FILL-BOX

MARGIN-BOX

PADDING-BOX

STROKE-BOX

VIEW-BOX

JS

INTERNAL

mask

mask-clip

mask-composite

mask-image

mask-mode

mask-position

mask-repeat

mask-size

mask-type

EXTERNAL

World Wide Web Consortium (W3C)