Background-clip

The background-clip property is CSS3 new feature.

The background-clip property is used to place background image or color to underneath its border.

If there is no image or color, background-clip property will only have a visual effect when border has transparent regions or partially opaque regions.

CSS Syntax

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

Let's see an example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border-box {
        width: 250px;
        height: 80px;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #8ebf42;
        border: 4px dashed #1c87c9;
        -webkit-background-clip: border-box; /* Safari and Chrome */
        -moz-background-clip: border-box; /* Firefox */
        -ms-background-clip: border-box; /* Internet Explorer */
        -o-background-clip: border-box; /* Opera */
        background-clip: border-box;
      }
      .padding-box {
        width: 250px;
        height: 80px;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #8ebf42;
        border: 4px dashed #1c87c9;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        -ms-background-clip: padding-box;
        -o-background-clip: padding-box;
        background-clip: padding-box;
      }
        .content-box {
        width: 250px;
        height: 80px;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #8ebf42;
        border: 4px dashed #1c87c9;
        -webkit-background-clip: content-box;
        -moz-background-clip: content-box;
        -ms-background-clip: content-box;
        -o-background-clip: content-box;
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <div class="border-box">background-clip: border-box</div>
    <div class="padding-box">background-clip: padding-box</div>
    <div class="content-box">background-clip: content-box</div>
  </body>
</html>

Property Values

Value Descriptions
border-box It places background image to outside edge of the border. It is default value.
padding-box It places background image to the padding box.
content-box It places background image to the content box.
initial It sets the property to its default value.
inherit It inherits the property from its parents element.