<div>border-box</div>
<div>padding-box</div>
<div>content-box</div>
div {
	display: inline-block;
	margin: .125em 0;
	border: solid 2.5em #000;
	border-image: repeating-linear-gradient(45deg, 
			#4ca454, #4ca454 2%, 
			transparent 2%, transparent 5%) 40;
	padding: 1em;
	width: 7em; height: 3em;
	background: linear-gradient(to right bottom, 
		  #e18728, #be4c39, #9351a6, #4472b9), 
		url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/tiger_lily.jpg) 100% 100%;
	background-repeat: no-repeat;
	background-size: 50% 50%;
	font: 700 1em courier, monospace;
	
	&:nth-child(1) { 
		background-origin: border-box; 
	}
	&:nth-child(2) { 
		background-origin: padding-box; 
	}
	&:nth-child(3) { 
		background-origin: content-box; 
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.