CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

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 ::first-letter and ::first-line.
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

background-clip: 
border-box | padding-box | content-box | initial | inherit

The example below shows the background-clip property in action.

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

Browsers Icon

Basic Support—

  • Firefox 4+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 3+
  • Opera 10.5+

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.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties