title: circle image css with border on top of circle image
body: <p>Hello I would like to create a thick semi opaque border inverted around a css circle image.</p>
  
  <p>This my css code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle {
    display: block;
    width: 500px;
    height: 500px;
    margin: 1em auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: -99em;
    
    border-bottom: -5px solid rgba(214, 11, 82, 0.73);
    border-top: -5px solid rgba(214, 11, 82, 0.73);
    border-left:  -5px solid rgba(214, 11, 82, 0.73);
    border-right: -5px solid rgba(214, 11, 82, 0.73);    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="circle" style="background-image: 
         url('http://hk.helpstore.co.uk/images/intro.jpg')"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>