background-clip
The background-clip CSS property sets the extent of the background: the padding box, the content box, or the default border box.
Overview
The background-clip CSS property sets the extent of the background: the padding box, the content box, or the default border box.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 4 | 5 | 18 | 5 | |
border-box | 1 | 12 | 4 | 3 | 18 | 2 |
content-box | 1 | 12 | 4 | 3 | 18 | 1 |
padding-box | 1 | 12 | 4 | 3 | 18 | 2 |
background-clip Values of `background-clip` longhand | 21 | 12 | 22 | 5.1 | 25 | 4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Implementation note
- Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Implementation note
- Since Edge 79, accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Notes 5 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (1)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (4)
Implementation note
- Used the `-moz-background-clip: padding | border` syntax.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (3)
Implementation note
- Safari accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Implementation note
- Chrome Android accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Implementation note
- Safari accepts alternate synonyms to its values: `padding`, `border`, and `content`.
Syntax
CSS
.padded-bg {
background-color: #f0f0f0;
background-clip: content-box;
padding: 20px;
}Live demo
Use cases
Using background-clip
The background-clip CSS property sets the extent of the background: the padding box, the content box, or the default border box.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features