CSS3 background-clip Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath it's border or not.
The following table summarizes the usages context and the version history of this property.
| Default value: | border-box |
|---|---|
| Applies to: | All elements. It also applies to |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the background-clip property in action.
Example
Try this code ».box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: orange;
background-clip: content-box;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
border-box |
Specifies that the background extends to the outside edge of the border. Background is drawn below the border. This is default value. |
padding-box |
Specifies that the background extends to the outside edge of the padding. No background is drawn below the border. |
content-box |
Specifies that the background is painted within (clipped to) the content box only. No background is drawn below the border and padding area. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element background-clip property. |
Browser Compatibility
The background-clip property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Background, CSS3 Background.
Related properties: background, background-attachment, background-color, background-image, background-origin, background-position, background-repeat, background-size.
