Actually there is a frame in Photoshop, but I don’t know how to create it. It turns out crooked .. Made through border-image

enter image description here

  • Use border-image - Qwertiy ♦

1 answer 1

Alternatively, based on jsfiddle # 1 , jsfiddle # 2
display: inline-block to trigger the upper margin without it collapsing and there will be no border effect.

 .outside { background-color: transparent; background-size: 14px 14px; background-image: repeating-linear-gradient(-45deg, black, black 5px, transparent 5px, transparent 10px); height: 100px; width: 200px; } .inside { background: white; margin: 10px; height: 80px; display: inline-block; width: 180px; } 
 <div class="outside"> <div class="inside"></div> </div>

Repeating-linear-gradient support