CSS background-clip property
Tags: learncss, cssb
Published: 2021-05-10 05:26:32

---
title: CSS background-clip property
published: true
date: 2021-02-19 11:51:04 UTC
tags: LearnCSS,CSSB
canonical_url: https://sharepointanchor.com/learn-css/css-background-clip-property/
---

The CSS background-clip property **defines how far the background should extend with an element**. Here the background can be a color or an image. It is one of the **CSS3** properties.

![⚠](https://s.w.org/images/core/emoji/13.0.1/72x72/26a0.png) **Note:** If the image had no background-color or background-image, then this property only has a visual effect.

- This property allows only the following values. 
  - **border-box**
  - **padding-box**
  - **content-box**
  - **text**
  - **initial**
  - **inherit**

## Characteristics of Background-clip Property:

| **Initial value** | border-box |
| **Applies to** | All elements. It also applies to **`::first-letter`** and **`::first-line`** |
| **Inherited** | No |
| **Animatable** | No |
| **Version** | CSS3 |
| **JavaScript syntax** | **`object.style.backgroundClip = "content-box";`** |

## Syntax:

```

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

```

## Values:

| **Value** | **Description** |
| --- | --- |
| **border-box** | It is a **default** value. This value **makes the background appears behind the border**. |
| **padding-box** | The **background appears inside the border**. |
| **content-box** | It makes the **background extend to the edge of the content box**. |
| **text** | With this value, the **background is painted within the foreground text**. |
| **initial** | **Sets the property to its default value**. |
| **inherit** | **Inherits the property from its parent element**. |

## Example of the background-clip property:

The following code use the background-clip property.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {

        border: 3px solid #1B0031;

        padding: 15px;

        background: #DEBDFD;

        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>

```

## Result:

After executing the above code, you will get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_ifJt6j1u90.png)<figcaption>background-clip property</figcaption>

## Example of the background-clip property with the “padding-box” & “border-box” values:

In the following code, we use the background-clip property with the **padding-box** and **border-box** values.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {

        border: 5px dashed #007BB1;

        padding: 15px;

        background: #94DDFD;

        background-clip: border-box;

      }
      #example2 {

        border: 5px dashed #007BB1;

        padding: 15px;

        background: #94DDFD;

        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>
  </body>
</html>

```

## Result:

Now, you can get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_fheYhLDCH1.png)<figcaption>Background-clip property with two values</figcaption>

## Example of the background-clip property with the “text” value:

This following code shows the background-clip property with the text value.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {

        border: 3px dashed #FD6301;

        padding: 15px;

        background: #000EE4;

        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>

```

## Result:

By running the above code, you will get the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_vVioB9vGVG.png)<figcaption>background-clip property with text value</figcaption>

## Browser-Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_wZTUs4tFsD.png)<figcaption>Browser-support</figcaption>

**Also Read:**

- [CSS background Property](https://sharepointanchor.com/learn-css/css-background-property/)
- [HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)
- [HTML <body> Body Tag](https://sharepointanchor.com/learn-html/html-body-tag/)
- [CSS background-attachment Property](https://sharepointanchor.com/learn-css/css-background-attachment-property/)
- [CSS all Property](https://sharepointanchor.com/learn-css/css-all-property/)

The post [CSS background-clip property](https://sharepointanchor.com/learn-css/css-background-clip-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).