How to add border on img-responsive or img-circle

Question

I have an image with 450x450 size which is automatically resized because using img-responsive and img-circle. The problem is that the radius border is always trying to border the original size (450x450).

 .img-circle { border-radius:50%; border: 10px solid red; }

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <div class="col-md-2 col-sm-3 col-xs-6"> <img src="https://via.placeholder.com/450x450" class="img-responsive img-circle pad-img" alt="" /> </div> <div class="col-md-2 col-sm-3 col-xs-6"> <img src="https://via.placeholder.com/450x450" class="img-responsive img-circle pad-img" alt="" /> </div> <div class="col-md-2 col-sm-3 col-xs-6"> <img src="https://via.placeholder.com/450x450" class="img-responsive img-circle pad-img" alt="" /> </div>

the actual result is like this: http://prntscr.com/pji0u1

Answer 1

You required padding. if you dont want then you can add padding 0 will help. Try this.

 .img-circle { border-radius: 50%; border: 10px solid red; padding: 20px; //padding: 0px //if you don't want padding. }

 <div class="col-md-2 col-sm-3 col-xs-6"> <img src="https://dummyimage.com/400x400/000/fff" class="img-responsive img-circle pad-img" alt="" /> </div>

Answer 2

You can specify explicitly the size of the picture, and after draw border. I added HTML and CSS code:

HTML:

<div class="col-md-2 col-sm-3 col-xs-6">
   <img src="https://images.pexels.com/photos/2916450/pexels-photo-2916450.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-responsive img-circle pad-img" alt="" />
</div>

Css:

body {
  background-color: gray;
}


.img-circle {
  border: 10px solid white;
  border-radius: 100%;
}

.pad-img {
  image: cover;
  width: 450px;
  height: 450px;
}

Screenshot with the result