How to implement a block with such a frame

body, html { width: 100%; height: 100%; background: #404040; } .box { width: 200px; height: 100px; background: #f90; border: 2px solid; border-image: linear-gradient(to left, white 50%, black 0%); border-image-slice: 1; } 

 <div class="box"></div> 

 * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #D5D8DA; padding: 15px; } .box { background: linear-gradient(to right, rgba(8, 110, 219, 1) 0%, rgba(8, 110, 219, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%); padding: 3px; } .box-inner { padding: 25px; background: #D5D8DA; } .box:hover { background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(8, 110, 219, 1) 50%, rgba(8, 110, 219, 1) 100%); } 

 <div class="box"> <div class="box-inner"> </div> </div>