background-clip

Defines the boundary within the element box at which the background is no longer drawn.

Syntax

background-clip: <value>;

Where <value> can be the following: border-box | content-box | padding-box | text | initial

Example 1

Set background to the edge of the content box:

body {
  background: #000000;
  border: 5px dashed grey;
  padding: 20px;
  background-clip: content-box;
}

Example 2

Set background to the inside edge of the border:

body {
  background: #000000;
  border: 5px dashed grey;
  padding: 20px;
  background-clip: padding-box;
}

Example 3

Set background to the edge of the border:

body {
  background: #000000;
  border: 5px dashed grey;
  padding: 20px;
  background-clip: border-box;
}

Example 4

Set background within the foreground text:

body {
  background: #000000;
  border: 5px dashed grey;
  padding: 20px;
  background-clip: text;
  color: transparent;
}

Illustration of Background-Clip