:hover on a div with a border radius

Question

I'm having an issue with hovering and a div with a border radius.

When a div has images inside it and a border radius, the "hitbox" for it is incorrect. Hovering over any of the corners of the div (where the corners would be if it didn't have a border radius) causes the hover style to show. I would expect the style to only show when the mouse is actually within the circle.

If there is nothing in the div, the div's "hitbox" is correct, however it surpasses the border when there are elements within it.

I could a background image in the div, however I'd prefer not to for accessibility reasons.

#test-wrapper {
  background-color: #EEE;
  border: 4px dashed #999;
  display: inline-block;
}

#switcher {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

#switcher,
#switcher .first,
#switcher .second {
  width: 100px;
  height: 100px;
}

#switcher .first,
#switcher .second {
  position: absolute;
  top: 0;
  left: 0;
}

#switcher:hover .first {
  display: none;
}

  <!-- This is used to show the "hitbox" for the switcher and has no effect on the switcher itself -->
<div id="test-wrapper">
  <div id="switcher">
    <!-- Shown on hover -->
    <img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=Second&w=100&h=100&txttrack=0" class="second">
    
    <!-- Always shown -->
    <img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=First&w=100&h=100&txttrack=0" class="first">
  </div>
</div>

Answer 1

The problem here is that child elements do not inherit the border-radius of their parents. There are 2 ways to achieve what you want: you can either set the border-radius of the child element(s) to match or be greater than the parent element's radius or set the overflow property of the parent element to hidden.

Here's a quick Snippet illustrating the problem and both solutions:

*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}
div{
    background:#000;
    border-radius:50%;
    display:inline-block;
    line-height:150px;
    margin:10px;
    text-align:center;
    vertical-align:top;
    width:150px;
}
p{
    background:rgba(255,0,0,.25);
}
div:nth-of-type(2)>p{
    border-radius:50%;
}
div:nth-of-type(3){
    overflow:hidden;
}

<div><p>Square hit area</p></div><div><p>Round hit area 1</p></div><div><p>Round hit area 2</p></div>

---

If the child elements are images then you'll need the added trick of using an image map to crop their hit areas (Credit: Border-radius and :hover state area issue), like so:

*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}
div{
    background:#000;
    border-radius:50%;
    display:inline-block;
    margin:10px;
    text-align:center;
    vertical-align:top;
    width:calc(33% - 20px);
    max-width:600px;
}
img{
    display:block;
    cursor:pointer;
    height:auto;
    width:100%;
}
div:nth-of-type(2)>img{
    border-radius:50%;
}
div:nth-of-type(3){
    overflow:hidden;
}

<div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600"></div><div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600" usemap="circle"></div><div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600" usemap="circle"></div>
<map name="circle"><area shape="circle" coords="0,100%,100%,100%"></map>