![Shelley591](https://vmapp.org/images/player/000default.jpg)
: 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 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:
More posts by @Shelley591
3 Comments
Sorted by latest first Latest Oldest Best
I realize your question is really pertaining to CSS3 border-radius, but I thought I would drop this link to PolyClip, which allows you to create vector masks in a web browser. Makes it so you can use a much small JPG file and a clipping path instead of a large PNG file with alpha transparency. So if you're looking to clip images more complex than rounded corner boxes, this would be the route to go.
You can also use timthumb so you dont have to worry about exact image sizes for your rectangles, and then use Johannes tip above for the rounded corners.
www.binarymoon.co.uk/projects/timthumb/
This effect is made with CSS.
Simply add a border-radius attribute to your image to make it have rounded corners.
Example:
img {
border-radius: 10px;
}
(That would apply it to all images)
Here is a live example you can play around with.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2025 All Rights reserved.