How to make rounded corner thumbnail ” containing image of the post “?

When I create rounded rectangles in Photoshop, I can mask images over those rounded rectangles to give them rounded corners.

When I’m making websites however, I’m not sure how to give images rounded corners.

I don’t know how to use vector masks on website, do you think it’s the right solution?
Please, if anyone can provide me with a tutorial or anything I will be very thankful.

Online example:

enter image description here


This effect is made with CSS.

Simply add a border-radius attribute to your image to make it have rounded corners.


img {
border-radius: 10px;

(That would apply it to all images)

Here is a live example you can play around with.

Source : Link , Question Author : ahmed amro , Answer Author : Hanna

Leave a Comment