background-clip property CSS Reference

Definition and Usage

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

If there is no background image, this property has only visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference.

  • Initial border-box
  • Applies to all elements
  • Inherited no
  • Media visual
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: <box>#
background-clip: border-box
background-clip: padding-box
background-clip: content-box
background-clip: inherit


The background extends to the outside edge of the border (but underneath the border in z-ordering).
No background is drawn below the border (background extends to the outside edge of the padding).
The background is painted within (clipped to) the content box.


pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* The yellow background will not go behind the border */
   background-clip: padding-box;


Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 4.0 (2.0) 9.0 10.5 3.0 (522)
content-box 1.0 4.0 (2.0) 9.0 12.0 (maybe earlier) 3.0 (522)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA NA NA NA NA
content-box NA NA NA NA NA

Relative articles