mozilla
Your Search Results

    background-clip

    Summary

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

    If no background image or color is set, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise the border covers up the difference.

    Syntax

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

    Values

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

    Examples

    Using padding-box

    HTML content

    <p>The yellow background extends to the inside edge of the border.</p>

    CSS content

    p {
       border: 5px navy;
       border-style: dotted double;
       margin: 2em;
       padding: 2em;
    
       /* The yellow background extends to the inside edge of the border. */ 
       background: #F8D575;
       background-clip: padding-box;
     }

    Output

    Using border-box

    HTML content

    <p>The yellow background extends behind the border.</p>

    CSS content

    p {
       border: 5px navy;
       border-style: dotted double;
       margin: 2em;
       padding: 2em;
    
       /* The yellow background WILL go behind the border. */
       background: #F8D575;
       background-clip: border-box;
     }

    Output

    Using content-box

    HTML content

    <p>The yellow background extends only to the edge of the content box.</p>

    CSS content

    p {
       border: 5px navy;
       border-style: dotted double;
       margin: 2em;
       padding: 2em;
    
       /* The yellow background extends only to the edge of the content box. */
       background: #F8D575;
       background-clip: content-box;
     }

    Output

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'background-clip' in that specification.
    Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
    content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 12.0 (maybe earlier) 3.0 (522) [3]
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 4.1 14.0 (14) 7.1 12.1 (Yes)
    content-box 4.1 14.0 (14) 7.1 12.1 (Yes)

    [1] Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different, and prefixed, syntax: -moz-background-clip: padding | border.

    [2] Internet Explorer 7 supported, but in other versions of Internet Explorer it behaves like background-clip:padding if overflow: hidden | auto | scroll.

    [3] Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

    [4] Konqueror 3.5.4 supports -khtml-background-clip.

    See also