CSS background-clip Property

CSS background-clip property specifies how far the background-color and background-image should be from the element. If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions; otherwise, the border shows the difference.

Initial Value border-box
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.backgroundClip = "content-box";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example{
      border: 3px solid #666;
      padding: 15px;
      background: #ccc;
      background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the "content-box" value is used.</p>
    <div id="example">
      <p>The background extends to the edge of the content box.</p>
    </div>
  </body>
</html>

In the following example find the difference between the "padding-box" and the "border-box" values.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
      border: 5px dashed #666;
      padding: 15px;
      background: #1c87c9;
      background-clip: border-box;  
      }
      #example2 {
      border: 5px dashed #666;
      padding: 15px;
      background: #1c87c9;
      background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the background-clip is set to "border-box" (this is the default value).</p>
    <div id="example1">
      <p>The background extends behind the border.</p>
    </div>
    <p>Here the background-clip is set to "padding-box".</p>
    <div id="example2">
      <p>The background extends to the inside edge of the border.</p>
    </div>
    </div>
  </body>
</html>

In this example the background is painted within the foreground text.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
      border: 3px dashed #1ebf42;
      padding: 15px;
      background: #1c87c9;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the background-clip is set to "text"</p>
    <div id="example">
      <p>The background is painted within the foreground text.</p>
    </div>
  </body>
</html>

Values

Value Description
border-box The background appears behind the border. This is default value.
padding-box The background appears inside of the border.
content-box The background extends to the edge of the content box.
text The background is painted within the foreground text.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.




Related articles