Resize image and rounded corners using CSS

The idea is to use the background-size: cover; CSS property which handles the centering, cropping and, well, covering. Here’s an extract from the fiddle: div.yourWrapper { width: 50px; height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: url(‘some_image.jpg’) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }