Fit the border correctly

#1

Hi, learning front-end for the first time is kinda hard haha. Can someone explain to me how to make the <img> fit the flagborder? I mean, the image has a gap between it’s sides and the border, but fits perfectly on top-bottom.

 .small-image{
      width:50%;
    }

.flagborder{
  border-color:#fff;
  border-style:solid;
  border-width:3px;
  border-radius:10%
}

<img class="small-image container-fluid flagborder" src="http://vignette3.wikia.nocookie.net/disneychannel/images/7/79/Brazil-Flag-Wallpapers-1920x1200.jpg/revision/latest?cb=20140804023346" alt="Teste">
#2

check this codepen about your issue

#3

Ok, the problem was the “container-fluid” class. If you remove it it will go back to normal. But why?

#4