<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
.container {
max-width: 100%;
margin: 0 auto;
display: flex;
}
.box1 {
width: 250px;
height: 250px;
background: url("https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmFja2dyb3VuZHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60") no-repeat;
background-origin: border-box;
border: 5px dashed #000;
padding: 5px;
margin: 5px;
}
.box2 {
width: 250px;
height: 250px;
background: url("https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmFja2dyb3VuZHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60") no-repeat;
border: 5px dashed #000;
background-origin: padding-box;
padding: 5px;
margin: 5px;
}
.box3 {
width: 250px;
height: 250px;
background: url("https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmFja2dyb3VuZHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60") no-repeat;
border: 5px dashed #000;
background-origin: content-box;
padding: 5px;
margin: 5px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.