title: Creating a gradient border for non-div element
body: <p>i have bordered button (Non-div element, ). I need to get gradient color on the borders of my button. Now my button looks like this (In generally this is it):</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>.uibutton, uibutton:focus {
    width: 120px;
    height: 27px;
    color: #007AFF;
    outline: none;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #007AFF;
    background-color: transparent;
  }
  .uibutton:active {
    width: 120px;
    height: 27px;
    color: #007AFF;
    outline: none;
    border-radius: 3px;
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
  }
  .uibutton:disabled {
    width: 120px;
    height: 27px;
    color: #C7C7CC;
    outline: none;
    border-radius: 3px;
    border-width: 1px;
    border-color: #C7C7CC;
    border-style: solid;
    background-color: transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="uibutton"&gt;Hello World&lt;/button&gt;
  &lt;button class="uibutton" disabled&gt;Hello World&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need gradient only in borders of button.
  I'm so sorry, i'm idiot, just i confused in my code and how to write it.
  Thanks for patience.</p>