.archive .type-post {
	margin-bottom: 1em;
	border-bottom: 1px solid #ededed;
	padding-bottom: 1em;
}

.archive footer[role="contentinfo"] {
    border-top: none;
}

First, a friend of mine provided some other code which basically does the same thing.

article.post.hentry { border-bottom: 1px solid #fff; padding-bottom: 30px; margin-bottom: 30px; }
article.post.hentry:last-child { border-bottom: none; padding-bottom: 0; }

I don’t understand CSS well enough to know why these two bits of code do basically the same thing. Why does .archive .type-post modify exactly the same thing as article.post.hentry?

Second, is there a way I could use an image as the divider, rather than a 1px line? I have a horizontal line image that I use as a divider on pages and in posts. Is it possible to use that instead?

Thanks again for your help!

why these two bits of code do basically the same thing

The simple answer is there is often, with CSS, more than one way to get the same results.

When I chose the elements to target the CSS to in my example, I wanted to target only the posts that where on an archive page.

The class .archive is output via the body classes functions.

That is the first part of the CSS. The second part removes the top border on the footer.

Since ‘article’ is an HTML element, to know for sure when targeting it that we are not affecting other site content, I chose to be more targeted.