Marusya's School Notes

CSS3 Background-Clip Property

The CSS3 background-clip property specifies the painting area of the background. The property takes three different values:

border-box - (default) the background is painted to the outside edge of the border
padding-box - the background is painted to the outside edge of the padding
content-box - the background is painted within the content box

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-Box This is the Border-Box Value. Clipped to Padding-Box This is the Padding-Box Value. Clipped to Content-Box This is the Content-Box Value.

HTML file:

Displayed by browser:

<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-Box

This is the Border-Box Value.

Clipped to Padding-Box

This is the Padding-Box Value.

Clipped to Content-Box

This is the Content-Box Value.