Open
Description
https://drafts.csswg.org/css-backgrounds/#background-clip
border-box
The background is painted within (clipped to) the border box.padding-box
The background is painted within (clipped to) the padding box.content-box
The background is painted within (clipped to) the content box.
This doesn't seem to be the case in any browser:
<!DOCTYPE html> <style> #target::-webkit-scrollbar { background: rgba(0, 255, 255, 0.5); width: 12px; height: 12px; } #target { scrollbar-color: rgba(0, 255, 255, 0.5) rgba(0, 255, 255, 0.5); display: flex; overflow: scroll; width: 100px; height: 100px; border: 15px solid rgba(0, 0, 0, 0.5); padding: 25px; background: repeating-linear-gradient(-45deg, orange 0 10px, transparent 10px 20px) content-box, repeating-linear-gradient(45deg, magenta 0 10px, transparent 10px 20px) padding-box; } #content { flex-grow: 1; background: repeating-linear-gradient(45deg, lime 0 10px, transparent 10px 20px); } </style> <div id="target"> <div id="content"></div> </div>I'm using ::webkit-scrollbar and widget.gtk.overlay-scrollbars.enabled=false to force classic scrollbars.
| Gecko | Blink | WebKit |
|---|---|---|
 |  |  |
- Lime: actual content box
- Orange:
background-clip: content-box - Magenta:
background-clip: padding-box - Semitransparent cyan: scrollbars
- Semitransparent black: borders
So there seems to be interoperability that:
background-clip: padding-boxclips to the border box shrunken by the border widths, not to the padding box.background-clip: content-boxclips to the border box shrunken by the border widths and padding, not to the content box.