background-clip property enables you to display until what area/contents the background.
There are 4 types of background-clip: border-box, padding-box, content-box, text.
Each type represents the boundary of the background render. border-box means the background will be rendered to the border.
padding-box to the padding, content-box to the content, and text-box to the text.
Example
It would be much easier if you see the example.




HTML Code
Here is the code for html
<div class="border-box">This is background clip border box</div> <div class="padding-box">This is background clip padding box</div> <div class="content-box">This is background clip content box</div> <div class="text-box">This is background clip text box</div>
CSS Code
Here is the code for CSS. Please note that I used transparent in text class so that the color will be displayed.
div { border: .8em darkviolet; border-style: double; margin: 1em 0; padding: 1.4em; background: linear-gradient(to right, #7ed56f, #28b485); font: 900 1.2em sans-serif; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text-box { background-clip: text; -webkit-background-clip: text; color: transparent; }