CSS | background-clip Property - GeeksforGeeks

17 Dec, 2021
The background-clip property in CSS is used to define how to extend background (color or image) within an element.
Default Value:
border-box
Syntax:
background-clip: border-box|padding-box|content-box|initial|inherit;

Property value:
border-box: The border-box property is used to set the background color spread over the whole division.
Syntax:background-clip: border-box;
background-clip: border-box;
Example:htmlhtml<!DOCTYPE html><html>     <head>         <title>Border Box</title>         <style>             .gfg {                 background-color: green;                 background-clip:border-box;                 text-align:center;                border:10px dashed black;            }         </style>     </head>           <body>         <div class = "gfg">             <h2>                GeeksforGeeks            </h2>             <p>                background-clip: border-box;            </p>        </div>     </body> </html>                            
html
<!DOCTYPE html><html>     <head>         <title>Border Box</title>         <style>             .gfg {                 background-color: green;                 background-clip:border-box;                 text-align:center;                border:10px dashed black;            }         </style>     </head>           <body>         <div class = "gfg">             <h2>                GeeksforGeeks            </h2>             <p>                background-clip: border-box;            </p>        </div>     </body> </html>                            
Output:
padding-box: The padding-box property is used to set the background inside the border.
Syntax:background-clip:padding-box;
background-clip:padding-box;
Example:htmlhtml<!DOCTYPE html><html>     <head>         <title>padding-box property</title>         <style>             .gfg {                 background-color: green;                 background-clip:padding-box;                padding: 25px;                border: 10px dashed black;            }         </style>     </head>           <body style = "text-align:center">               <div class = "gfg">             <h2>                GeeksforGeeks            </h2>             <p>                background-clip: padding-box;            </p>        </div>     </body> </html>                    
html
<!DOCTYPE html><html>     <head>         <title>padding-box property</title>         <style>             .gfg {                 background-color: green;                 background-clip:padding-box;                padding: 25px;                border: 10px dashed black;            }         </style>     </head>           <body style = "text-align:center">               <div class = "gfg">             <h2>                GeeksforGeeks            </h2>             <p>                background-clip: padding-box;            </p>        </div>     </body> </html>                    
Output:
content-box: The content-box property is used to set the background color upto the content only.
Syntax:background-clip:content-box;
background-clip:content-box;
Example:htmlhtml<!DOCTYPE html><html>     <head>         <title>content-box property</title>         <style>             .gfg {                background-color: green;                 background-clip:content-box;                padding: 15px;                border: 10px dashed black;            }         </style>     </head>           <body style = "text-align:center">               <div class = "gfg">             <h2>                GeeksforGeeks            </h2>             <p>                background-clip: content-box;            </p>        </div>     </body> </html>                            
html
<!DOCTYPE html><html>     <head>         <title>content-box property</title>         <style>             .gfg {                background-color: green;                 background-clip:content-box;                padding: 15px;                border: 10px dashed black;            }         </style>     </head>           <body style = "text-align:center">               <div class = "gfg">             <h2>                GeeksforGeeks            </h2>             <p>                background-clip: content-box;            </p>        </div>     </body> </html>                            
Output:
initial: It is the default value. It is used to set the background color spread over the whole division.
Syntax:background-clip:initial-box;Example:htmlhtml<!DOCTYPE html><html>     <head>         <title>Initial</title>         <style>             .gfg {                 background-color: green;                 background-clip:initial;                padding: 15px;                border: 10px dashed black;            }         </style>     </head>           <body style = "text-align:center">               <div class = "gfg">             <h2>                GeeksforGeeks            </h2>             <p>                background-clip: initial;            </p>        </div>     </body> </html>                    
background-clip:initial-box;
Example:
html
<!DOCTYPE html><html>     <head>         <title>Initial</title>         <style>             .gfg {                 background-color: green;                 background-clip:initial;                padding: 15px;                border: 10px dashed black;            }         </style>     </head>           <body style = "text-align:center">               <div class = "gfg">             <h2>                GeeksforGeeks            </h2>             <p>                background-clip: initial;            </p>        </div>     </body> </html>                    
Output:Supported Browser: The browser supported by background-clip property are listed below:Google Chrome 4.0Internet Explorer 9.0Firefox 4.0Opera 10.5Safari 3.0My Personal Notes
arrow_drop_upSave
Supported Browser: The browser supported by background-clip property are listed below:
Google Chrome 4.0
Internet Explorer 9.0
Firefox 4.0
Opera 10.5
Safari 3.0
skyridetim
hritikbhatnagar2182
prachisoda1234
CSS-Properties
Picked
Technical Scripter 2018
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript