Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

background-clip

Introduction

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

Examples

css-apisrc/background-clip/App.tsx
Preview

Syntax

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

// multiple clip
background-clip: border-box, content-box, padding-box;

Values

  • border-box
    The background extends to the outside edge of the border (but underneath the border in z-ordering).

  • padding-box
    The background extends to the outside edge of the padding. No background is drawn beneath the border

  • content-box The background is painted within (clipped to) the content box.

Note

If the length of background-clip is less than background-image, the first clip value will effect on all remained background-image.

Formal definition

Initial valueborder-box
Applies toall elements
Inheritedno
Animatableno

Formal Syntax

<background-clip> = <box> where <box> = border-box | padding-box | content-box

Difference between web

  • Only support border-box、padding-box、content-box

  • background-clip:text is not support, and if want show text with gradient color, just set color: <gradient>.

Compatibility

Loading

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.