# Backgrounds Clip

The following classes control the background clip of elements:

## `.bg-clip-border`

Sets the background-clip property to "border-box", which clips the background image to the border box of the element.

CSS equivalent: `background-clip: border-box;`

Example usage:

```html
<div class="bg-clip-border">
  <!-- Content with a background image clipped to the border box -->
</div>
```

In the example above, the background image will be clipped to the border box of the element.

***

## `.bg-clip-padding`

Sets the background-clip property to "padding-box", which clips the background image to the padding box of the element.

CSS equivalent: `background-clip: padding-box;`

Example usage:

```html
<div class="bg-clip-padding">
  <!-- Content with a background image clipped to the padding box -->
</div>
```

In the example above, the background image will be clipped to the padding box of the element.

***

## `.bg-clip-content`

Sets the background-clip property to "content-box", which clips the background image to the content box of the element.

CSS equivalent: `background-clip: content-box;`

Example usage:

```html
<div class="bg-clip-content">
  <!-- Content with a background image clipped to the content box -->
</div>
```

In the example above, the background image will be clipped to the content box of the element.

***

## `.bg-clip-text`

Sets the background-clip property to "text", which clips the background image to the foreground text of the element.

CSS equivalent: `background-clip: text;`

Example usage:

```html
<div class="bg-clip-text">
  <!-- Content with a background image clipped to the text -->
</div>
```

In the example above, the background image will be clipped to the text of the element.

***

These utility classes provide control over how the background image is clipped within the element, allowing you to create interesting visual effects and enhance the design of your web page.