Как реализовать блок с такой рамкой

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>