Why does adding a border on my picture will decrease it's size?

Question

Are there any ways to add a border onto a image without decreasing the size of the image?

<li class="profile-active">

<a href="profile">

<img src="http://placepic.me/profiles/80-80" width="40" height="40" class="img-circle"></a>

</li>

<style>
.profile-acive{
  border: 10px solid #5693F9;
}
</style>

This is the CSS of the circle

// Perfect circle
.img-circle {

  border-radius: 50%; // set radius in percents

}

Answer 1

First of all you should set both the border and border-radius on the img element

.img-circle {
  border-radius: 100%;
  border: 10px solid #5693F9; 
}

This by default should work fine, and the border will not cause the picture to descrease in size

FIDDLE

That being said, if somewhere in your code you have changed the default value for box-sizing to be border-box,

Like so:

FIDDLE

...then you'll have to manually override it here on your image with box-sizing:content-box; to make sure that the border will not cause the picture to descrease in size. Like so:

FIDDLE

NB:

If you want a rounded border do not use outline

The outline property doesn't support rounded borders -

FIDDLE

Answer 2

You can use outline CSS property instead as this does not take up any space.