Prevent border clipping my image

Question

Okay so I have an image and I want a border outline around it (which I can get). But even if the border is 'x' far away from my image, the image still gets clipped. ONLY HAPPENS WHEN BORDER-RADIUS PROPERTY IS SET. Hopefully, that made some sense but here's some images to show what I mean. Btw sorry if this is anywhere else it's hard to think of good keywords when there's a border-image-outset property and other crap.

   .slideshow {
   display: none;
   margin-top: -50px;
   font-size: 25px;
   }

.slideshow table {
  width: 100%;
}

.slideshow table tr td {
  text-align: center;
}

.icon_circle {
  overflow: hidden;
}

td span {
  display: block;
  border-radius: 90px;
  padding: 30px;
  border: #000 5px solid;
}

  <div class="slideshow">
    <table>
      <tr>
        <td><img class="icon_circle" width="90px" src="https://i.sstatic.net/N2SF1.png" alt=""></td>
        <td><img class="icon_circle" width="90px" src="https://i.sstatic.net/N2SF1.png" alt=""></td>
        <td><img class="icon_circle" width="90px"  src="https://i.sstatic.net/N2SF1.png" alt=""></td>
      </tr>
    </table>
    <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
  </div>

Images:

No-Clipping

Clipping

Winrar logo

Answer 1

Placing the images inside a div and giving the divs the 'icon_circle' class fixed it. Had to add a few extra properties. Here's the working code for anyone who encounters same problem. =D

    #boxes .box img{
  height: 90px;
}
  .slideshow {
  display: none;
  margin-top: -50px;
  font-size: 25px;
}

.slideshow table {
  width: 100%;
}

.slideshow table tr td {
  text-align: center;
}

.icon_circle {
  display: table;
  margin: 0 auto;
  display: block;
  width: 90px;
  padding: 25px;
  border-radius: 250px;
  border: #000 5px solid;
}

    <div class="slideshow">
    <table>
      <tr>
        <td><div class="icon_circle" ><img src="https://i.sstatic.net/N2SF1.png" alt=""></div></td>
        <td><div class="icon_circle" ><img src="https://i.sstatic.net/N2SF1.png" alt=""></div></td>
        <td><div class="icon_circle" ><img src="https://i.sstatic.net/N2SF1.png" alt=""></div></td> 

      </tr>
    </table>
    <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
  </div>

Answer 2

overflow:none;

on the div that's holding your image.

Answer 3

This is because your are giving padding and border-radius to the image itself. Instead, add a SPAN tag give it border properties and inset img tag inside it. It will give you the desired output.

.icon_circle {
  overflow: hidden;
}

span {
  display: block;
  border-radius: 50%;
  padding: 30px;
  border: #000 5px solid;
}

<div class="slideshow">
  <table>
    <tr>
      <td><span>
        <img class="icon_circle" width="90px" src="https://i.sstatic.net/N2SF1.png" alt="">
        </span></td>
      <td><span><img class="icon_circle" width="90px" src="https://i.sstatic.net/N2SF1.png" alt=""></span></td>
      <td><span><img class="icon_circle" width="90px"  src="https://i.sstatic.net/N2SF1.png" alt=""></span></td>
    </tr>
  </table>
  <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 4

If you just remove the overflow:hidden: it should not clip, and you should change the html to have the class on the wrapping element

.icon_circle {
    padding: 30px;
    border-radius: 90px;
    border: #000 5px solid;
}

  <div class="slideshow">
    <table>
      <tr>
        <td class="icon_circle" ><img width="90px" src="https://i.sstatic.net/N2SF1.png" alt=""></td>
        <td class="icon_circle"><img  width="90px" src="https://i.sstatic.net/N2SF1.png" alt=""></td>
        <td class="icon_circle"><img width="90px"  src="https://i.sstatic.net/N2SF1.png" alt=""></td>
      </tr>
    </table>
    <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
  </div>

Answer 5

Give those css properties to td tag, instead of <img>

For example https://jsfiddle.net/kqogcLk4/

Answer 6

Add padding in the image e.g.

.image {
   padding: 10px;
}