Image shrinking issue with CSS
<p>I have a div in my html5 page that is a container for "projects". Each project then has an image and a number inside of that. When the project is selected, I'm adding a thicker border to the img I have loaded. However, adding that border shrinks the inside space allowed for the image so it appears to flash/jump/shrink when selected. Is there a technique or a way to do this so the image stays the same size but I can give the user an indication it has been selected? Right now, I'm changing the border-width and the border-color upon selection.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.projects_container{
  width: 100%;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  text-align: left;
  background-color: #fff;
}

.project {
  display: inline-block;
  position: relative;
  margin: 0;
  margin-right: 5px;
  width: 100px;
  height: 120px;
}

.project img{
  display: block;
  margin: 0;
  margin-bottom: 2px;
  width: 100px;
  height: 100px;
  border-style:solid;
  border-width: 0.5px;
  border-color: #000000;
  border-radius: 50px;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
}

.project.toggle img{
  border-width: 3.0px;
  border-color: #ce7019;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="project" id='project_button_1' &gt;&lt;a href='javascript:void(0)' onClick='showProject("1")'&gt;&lt;img src='urlhere'&gt;&lt;/img&gt;&lt;p&gt;1&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>