All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Rounded corners on images

  • # August 28, 2009 at 9:18 am


    I am having this problem: can’t found a way do make rounded corners on <img />. Apparently CSS3 doesn’t work for this. I tried to make

    .image { widht: 200px; height: 100px; -moz-border-radius: 10px; overflow: hidden; }

    but <img /> just overlaps those corners of parent div. Maybe I should use some javascript? Help please! ;)

    # August 28, 2009 at 12:31 pm

    This reply has been reported for inappropriate content.

    What would be the purpose? If you want the image to fall behind the css "viewport", why not just cut the image with rounded corners?

    # August 28, 2009 at 7:18 pm

    Setting overflow: hidden; might solve your problem, but do know that it only works in firefox.

    Also, if it’s only images, cut them using appropriate graphic tools to the desired shape, and the upload it. less browser stress, and more compatible.

    # August 29, 2009 at 9:47 am

    Cutting pictures with rounded corners won’t work for me… There is design for gallery where thumbnails is with rounded corners, so it won’t be good for my client.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed