title: CSS Border rotation
body: <p>In css can i rotate the border alone, instead of rotating the whole element?
  something like this:</p>
  
  <p>I basically wanna create a slanting border for my video player.</p>
  
  <p><img src="https://i.stack.imgur.com/9sOBo.png" alt="enter image description here"></p>
  
  <p>I wanna do something like the accepted answer of this post: <a href="https://stackoverflow.com/questions/13591584/slant-the-top-of-a-div-using-css-without-skewing-text">click here</a></p>
  
  <p>except that instead of slanting the top and bottom it slants only the right side.</p>
  
  <p>I've tried this, but it slants both left and right sides:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="skew-neg"&gt;
      &lt;p&gt;Hello World.&lt;/p&gt;
      &lt;p&gt;My name is Jonathan.&lt;/p&gt;
      &lt;p&gt;This box is skewed.&lt;/p&gt;
      &lt;p&gt;In supported browsers.&lt;/p&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html { 
      background: #FFF;
      color: lightblue;
      font: 16px 'Arial';
      line-height: 150%;
  }
  
  div {
      background: blue;
      margin: 50px auto 0;
      padding: 20px;
      width: 200px;
      box-sizing: border-box;
      box-shadow: 0 0 20px rgba(0,0,0,.9);
      border-radius: 25px;
  }
  
  .skew-neg {
      -webkit-transform: skewX(-50deg);
      -moz-transform: skewX(-50deg);
      -ms-transform: skewX(-50deg);
      -o-transform: skewX(-50deg);
      transform: skewX(-50deg);
  }
  
  .skew-neg &gt; * {
      -webkit-transform: skewX(50deg);
      -moz-transform: skewX(50deg);
      -ms-transform: skewX(50deg);
      -o-transform: skewX(50deg);
      transform: skewX(50deg);
  }
  </code></pre>