title: How to add background linear-gradient to iOS Safari, Mac Safari, Edge, and IE11?
body: <p>We are attempting to use <code>background: linear-gradient()</code> to get the following output. However, we are running into a problem where the css is not being applied to the following browsers. </p>
  
  <p><strong>Question:</strong></p>
  
  <p>How can we get it to work on all browsers?</p>
  
  <p><strong>Browsers with issues</strong></p>
  
  <ul>
  <li>Mac High Sierra Safari 11.1</li>
  <li>IE11</li>
  <li>Microsoft Edge 44.17763.771.0</li>
  <li>Safari on iOS (v12)</li>
  </ul>
  
  <p><strong>What we tried</strong></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>.box { 
    padding:20px;
    display:inline-block;
    border-right:2px solid #000;
    border-left:2px solid #000;
    background:
      linear-gradient(to left ,#000 10px,transparent 10px 30px,#000 0) top,
      linear-gradient(to right,#000 10px,transparent 10px 30px,#000 0) bottom;
    background-size:100% 2px;
    background-repeat:no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
  Some text inside
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>