background-clip
Published Jun 25, 2021Updated Sep 3, 2021
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: 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
- Anonymous contributorAnonymous contributor3077 contributions
- christian.dinh
- Anonymous contributor
- robgmerrill
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.