JSFiddle - React, Tailwind, and code Playground

HTML

<div>Two tone solid color top and bottom border to<br> match the two tone background</div>

CSS

div {
  height: 50px;
  width: 80%;
  padding: 4px;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);
  /* What I'm trying: */
  border-image: linear-gradient(right, #365aa5 44px, #000 0);
  border-style: solid;
  border-width: 2px 0 2px 0;
}


body {
  padding: 20px;
  background-color: #fff;
}