HTML/CSS multiple rounded images - html

Question

I'm trying to create a gallery of rounded photos (mostly landscape rectangular images). It works for the first image but I don't know how to apply it to all the images while maintaining the rounded format. Any help would be appreciated since I'm still new to this.
Here's my HTML:
<div class="photos">
<img src="url">
<img src="url">
etc.. more images
</div>
Then my CSS:
.photos {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
img {
width: auto;
height: 100%;
margin-left: -50px;
display: inline-block;
}

Answer 1

Add this to your css, it works for all img tag inside of Photos
.photos img{
border-radius: 50%;
}
<div class="photos"></div>

Answer 2

You should use .photos with one image inside it, like:
.photos {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
img {
width: auto;
height: 100%;
margin-left: -50px;
display: inline-block;
}
<div class="photos">
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/cardigan-welsh-corgi/chasing-8_680-453.jpg">
</div>
<div class="photos">
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/cardigan-welsh-corgi/chasing-8_680-453.jpg">
</div>
Hope this helps!

Answer 3

Try editing your css with this:
.photos img {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
img {
width: auto;
height: 100%;
margin-left: -50px;
display: inline-block;
}

Answer 4

You would simply put each image in its own <div> with a class round for instance.
.round {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
background-color:blue;
}
<div class='round'>
<img src='yourImage'>
</div>
<div class='round'>
<img src='yourImage'>
</div>