CSS | background-clip Property
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|text|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;
Example:
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;
Example:
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;
Example:
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:
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 Browsers:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 9.0 and above
- Firefox 4.0 and above
- Opera 10.5 and above
- Safari 14.0 and above
Please Login to comment...