title: How to put a border over a HTML5 video with CSS3
body: <p>I am building a website with a centered video, the problem is that inside the video are to black lines one on the right side on on the left, they aren't really big but they are bugging me and my colleagues.</p>
  
  <p>Then I had the idea of laying a tiny border with the same color as my background inside the video element like this:<div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#vid {
  position: float;
  margin-top: 100px;
  height: 480px;
  width: 854px;
  border: 3px solid #ECECEC;
  box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video id="vid" loop autoplay autobuffer controls muted&gt;
    &lt;source type="video/mp4" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.mp4"&gt;
    &lt;/source&gt;
    &lt;source type="video/webm" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.webm"&gt; 
    &lt;/source&gt;
    &lt;source type="video/ogg" src="http://www.mh-content.de/mh/video/MuH_Film_s_1.ogg"&gt;&lt;/source&gt;
  &lt;/video&gt;</code></pre>
  </div>
  </div>
  I got the tip with the <code>box-sizing</code> from <a href="http://www.soyoucode.com/2012/quick-tip-draw-border-element-css" rel="nofollow">this site</a>.
  I uploaded this but there was no border visible.
  Tested it on a normal div box without a video and its working just fine.
  I also tried putting the video in an extra div container and applying the <code>box-sizing: border-box</code> attribute to the container, still no border visible.</p>
  
  <p><a href="http://prakti.mh-content.de/MuH/" rel="nofollow">Link to my website</a></p>
  
  <p>Any help is appreciated :)</p>