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: 3px dashed blue;
padding: 20px;
background-clip: content-box;
}

Example 2

Set background to the inside edge of the border:

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

Example 3

Set background to the edge of the border:

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

Example 4

Set background within the foreground text:

body {
background: #000000;
background-clip: text;
color: transparent;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy