mozilla
Your Search Results

    background-clip Redirect 1

    Summary

    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.

    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

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

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3 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 ? ? ? ? ?
    content-box ? ? ? ? ?

    [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, but not other versions of Internet Explorer,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

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar