Each box has border: 8px solid #333 and padding: 12px. Three regions: border-box (full), padding-box (inside border), content-box (inside padding).
Solid colors fill the clip area regardless of origin — this verifies no rendering errors.
default (padding-box) background-color: steelblue | border-box background-origin: border-box | padding-box background-origin: padding-box | content-box background-origin: content-box |
Gradient coordinate space shifts with origin. border-box spans the full box; content-box spans only the content area.
default (padding-box) background: linear-gradient(to right, red, blue) | border-box background-origin: border-box | padding-box background-origin: padding-box | content-box background-origin: content-box |
Radial center and radius are computed from the origin rect. content-box produces a more compressed gradient.
default (padding-box) background: radial-gradient(circle, yellow, navy) | border-box background-origin: border-box | padding-box background-origin: padding-box | content-box background-origin: content-box |
background-clip controls where the background is painted. padding-box: no color behind border. content-box: color only in content area.
default (border-box) background-color: coral | border-box background-clip: border-box | padding-box background-clip: padding-box | content-box background-clip: content-box |
Gradient fills the origin area but is clipped to the clip area.
default (border-box) background: linear-gradient(to right, orange, purple) | border-box background-clip: border-box | padding-box background-clip: padding-box | content-box background-clip: content-box |
origin: border, clip: border origin: border-box; clip: border-box | origin: padding, clip: padding origin: padding-box; clip: padding-box | origin: content, clip: content origin: content-box; clip: content-box | origin: border, clip: padding origin: border-box; clip: padding-box |
origin: border, clip: content origin: border-box; clip: content-box | origin: padding, clip: content origin: padding-box; clip: content-box | origin: content, clip: padding origin: content-box; clip: padding-box | origin: content, clip: border origin: content-box; clip: border-box |
A single box-model keyword in the shorthand sets both origin and clip; two keywords set origin then clip.
single keyword — padding background: steelblue padding-box | single keyword — content background: coral content-box | gradient padding-box content-box linear-gradient padding-box content-box | gradient border-box padding-box linear-gradient border-box padding-box |
radial, clip: border-box radial; clip: border-box | radial, clip: padding-box radial; clip: padding-box | radial, clip: content-box radial; clip: content-box | radial, origin+clip: content origin: content-box; clip: content-box |
Comma-separated background-origin/background-clip values cycle per background-image layer, one value per layer, just like background-position/background-size.
2 layers: content-box, border-box origin/clip: content-box, border-box | 2 layers: padding-box, content-box origin/clip: padding-box, content-box | 3 layers cycling 2 values 3 layers, origin/clip cycle: border-box, content-box, border-box | color uses LAST clip entry background-clip: border-box, content-box (no images — color clips to content-box, the last entry) |
A comma-separated background-repeat value also cycles per layer — each background-image layer can repeat independently.
layer 1: no-repeat, layer 2: repeat background-repeat: no-repeat, repeat | layer 1: repeat-x, layer 2: repeat-y background-repeat: repeat-x, repeat-y |