title: Label and Image not hovering with border-radius and border
body: <p><a href="http://jsfiddle.net/W4XTj/" rel="nofollow">Jsfiddle</a></p>
  
  <p>Html</p>
  
  <pre><code>&lt;label for="home" class="prof"&gt;
  &lt;img src="http://bigbackground.com/wp-content/uploads/2013/05/modern-house.jpg" class="image-label" /&gt;
  &lt;/label&gt;
  &lt;input type="radio" name="type" value="home" id="home"&gt;
  &lt;label for="home" class="type"&gt;House Owner&lt;/label&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.image-label{
    width: 168px;
    height: 168px;
    border-radius: 100%;
  }
  
  input[type="radio"]:not(:checked),
  input[type="radio"]:checked {
    visibility: hidden;
  }
  
  label {
      position: relative;
      display: inline-block;
      cursor: pointer;
      float: left;
      text-align: center;
      width: 200px;
  }
  
  input[type=radio] + .prof img:hover {
      border: 15px solid red;
      border-radius: 100%;
  }
  input[type=radio]:checked + .prof img {
      border: 15px solid red;
      border-radius: 100%;
  }
  input[type=radio]:checked + .prof img:hover {
      border: 15px solid red;
      border-radius: 100%;
  }
  </code></pre>
  
  <p>Trying to have border-radius with border color appear when hover the image or after click and tick appear. border-radius with border color seems not to be possible for image? Because I have tried label with background image on local and it worked. However using background image on label caused the tick to be mispositioned despite of absolute positioning. </p>
  
  <p>Help appreciated. </p>