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;
}

div::after {content: ""; position: absolute; height: 2px; width: 44px; right: 0; background: #365aa5; top: -2px;}
div::before {content: ""; position: absolute; height: 2px; width: 44px; right: 0; background: #365aa5; bottom: -2px;}