<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.