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;}