Box experiment
Using clip-path to give an extruded border effect.
Box
Box
Box
Box
<div> <div class="box">Box</div> <div class="box">Box</div> <div class="box">Box</div> <div class="box">Box</div> </div>
.box{ display: inline-block; position: relative; margin: 0 4px 8px 4px; padding: 10px 20px 16px 30px; color: rgb(237, 62, 68); } .box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(237, 62, 68); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px, 10px 0, 10px calc(100% - 10px), calc(100% - 2px) calc(100% - 10px), calc(100% - 2px) 2px, 10px 2px); }