This box's "background color" is actually it's border-color. 🤯

tl;dr [the code]

1. There is no border on the element since border-width defaults to 0. There's only the border-color property.
2. There is a pseudo-element with position: absolute; behind the entire element.
3. The pseudo-element has an extremely large border that inherits the border color from its parent.
4. The large border overflows the parent and is hidden with overflow: hidden; on the parent.

Why Would You Do This?

Good question! This is definitely one of those tricks you might need when you have control over CSS but not markup.

For a real-world example, the WordPress Pullquote block sets its "Main Color" setting as an inline style for border-color. If you want the main color to appears as a background color, this is the only way I could figure out how to do it.

Ping me if this helps you out! I'd love to hear about it.