Negative margins and borders

I have some images I want to stack using negative margins. However, since stacking images without clearly defined boundaries can be visually confusing, I figured I should add a border around them. Strangely, the even though the images stack correctly, their borders end up underneath the previous element.

Why is this the behavior I'm getting, and is there a way to make the borders appear at their intuitive level?

#second {
  margin-top: -50px;
  margin-left: 20px;
}

img {
  border: 5px ridge green;
  display: block;
}

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>

EDIT: On Firefox, this is what it looks like: