Table of Contents

CSS Background-clip property

The background-clip property set the how far the background (color or image) should extend within an element.

CSS Syntax→ background-clip: border-box|padding-box|content-box;

  • Border-box : Default value. The background extends behind the border.
  • Padding-box : The background extends to the inside edge of the border.
  • Content-box : The background extends to the edge of the content box. 
Example
<!DOCTYPE html> 
<html>  
    <head>    
        <style>  
            .example1 {  
                background-color: yellow;  
                background-clip: border-box;  
                border:10px dotted blue;
                padding: 15px; 
            } 
             .example2 {  
                background-color: yellow;  
                background-clip: padding-box;  
                border:10px dotted blue;
                padding: 15px; 
            }  
             .example3 {  
                background-color: yellow;  
                background-clip: content-box;   
                border:10px dotted blue; 
                padding: 10px;
            } 
        </style>  
    </head> 
    <body> 
      <h1>CSS Background-clip property
      </h1>
    <h2>background-clip: Border-box;
    </h2>  
        <div class="example1">  
           <p> 
              Welcome to the Nielitbhu.com
            </p>   
        </div> 
        <h2> 
                background-clip: Padding-box; 
            </h2>  
        <div class="example2">  
            <p> 
              Welcome to the Nielitbhu.com
            </p> 
        </div> 
        <h2> 
                background-clip: Content-box; 
            </h2> 
        <div class="example3">  
           <p> 
              Welcome to the Nielitbhu.com
            </p> 
        </div> 
    </body>  
</html>