Enhanced rounded images with CSS3
4 feb
As you may know border-radius can round images using CSS3. But you can enhance this feature putting that image inside a div, which will has overflow: hidden, a fixed size and border-radius instead of image.
What is the gap? This way you will be able to choose which part of image you want to see and round.
Take a look on next code.
HTML, an image of 300×300 pixels:
<div>
<img src="http://www.jordisalord.com/wp-content/uploads/2012/02/qr-jordisalord-300x300.png" alt="Jordi Salord @ Blog" />
</div>
CSS:
<style>
div.img-round {
overflow: hidden;
border-radius: 5px;
box-shadow:-1px 1px 2px #000;
height:280px;
width:280px;
}
div.img-round img {
margin-top:-10px;
margin-left:-10px;
}
</style>
The original image:
The result:
That’s all folks!
What do you think about this technique? Is there any other way to do it?
Enjoy this tip, I’ve recently used this technique to round non-editable images.
