The CSS3 background-clip property specifies the painting area of the background. The property takes three different values:
The following example illustrates the background-clip property:
HTML file: | Displayed by browser: |
---|---|
<style>
#example1 { border: 10px dotted black; padding:35px; background: yellow; background-clip: border-box; } #example2 { border: 10px dotted black; padding:35px; background: yellow; background-clip: padding-box; } #example3 { border: 10px dotted black; padding:35px; background: yellow; background-clip: content-box; } </style> <body> <div id="example1"> <h2>Default is Border-Box</h2> <p>This is the Border-Box Value.</p> </div> <br /> <div id="example2"> <h2>Clipped to Padding-Box</h2> <p>This is the Padding-Box Value.</p> </div> <br /> <div id="example3"> <h2>Clipped to Content-Box</h2> <p>This is the Content-Box Value.</p> </div> </body> |
Default is Border-BoxThis is the Border-Box Value. Clipped to Padding-BoxThis is the Padding-Box Value. Clipped to Content-BoxThis is the Content-Box Value. |