title: CSS gradient border not showing correctly
body: <p>I want to set half blue and orange for <code>border-color</code> of <code>text</code> input.</p>
  
  <p>I tried using a gradient but it doesn't work. </p>
  
  <p>what is my code problem?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.search {
    width: 550px;
    height: 50px;
    margin-left: 350px;
    border-radius: 20px;
    outline: none;
    margin-top: 70px;
    border: solid;
    border-image: linear-gradient(to right, rgb(254, 113, 53) 50%, rgb(55, 154, 214) 50%);
    font-size: 20px;
    text-align: center;
    transition: all 0.2s linear;
  }
  
  .search:hover,
  .search:focus {
    border: #4cbea5 solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;form method="post"&gt;
      &lt;input type="Search" class="search" placeholder="Search"&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>