background-clip

Anonymous contributor's avatar
Anonymous contributor
Published Jun 25, 2021Updated Oct 17, 2023
Contribute to Docs

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

Rendered background-clip tag

All contributors

Contribute to Docs

Learn CSS on Codecademy