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

are there ways add border onto image without decreasing size of 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 css of circle

// perfect circle .img-circle {    border-radius: 50%; // set radius in percents  } 

first of should set both border , border-radius on img element

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

this default should work fine, , border not cause picture descrease in size

fiddle

that being said, if somewhere in code have changed default value box-sizing border-box,

like so:

fiddle

...then you'll have manually override here on image box-sizing:content-box; make sure border not cause picture descrease in size. so:

fiddle

nb:

if want rounded border not use outline

the outline property doesn't support rounded borders -

fiddle