I want to created automatically rounded corner thumbnails for a particular project I'm working on, using something like this: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

What I'd ideally like to do is find a way to hook something like this into the thumbnail creation process itself and cache it serverside. /wp-includes/media.php doesn't seem to have any applicable hooks, so I might have to roll my own.

Any clues on where to start?

EDIT: Not in CSS. There have been some good suggestions about this but I'm using border-radius all over the site, and the images specifically need to be rounded on the server side. Thanks

  • Sorry about the +25 bounty. I was late to work this morning.
    – Dan Gayle
    Commented May 9, 2011 at 15:47

9 Answers 9


Looks like you can hook into the wp_create_thumbnail filter:

function wp_create_thumbnail( $file, $max_side, $deprecated = '' ) {
if ( !empty( $deprecated ) )
     _deprecated_argument( __FUNCTION__, '1.2' );
     $thumbpath = image_resize( $file, $max_side, $max_side );
     return apply_filters( 'wp_create_thumbnail', $thumbpath );

So just do your manipulation, and return the result to wp_create_thumbnail.

  • Aha! It's in a different location. Sweetness. Lemme check this out, but it looks like you might have found what I need.
    – Dan Gayle
    Commented May 2, 2011 at 16:39
  • 3
    I'd love to see some working code with this filter, I played around with it and got nowhere, gave up pretty quickly.
    – Milo
    Commented May 2, 2011 at 17:17
  • 1
    @milo my answer has a bit of code you can try out Commented May 17, 2011 at 21:07

Even though you could process rounded corners with Php and image GD ( you will still have to pick a background color,) it is an awful lot of work/code/processing for what can easily be accomplished with JavaScript or CSS3.

For rounded images in CSS3 you have to wrap the image in a div and make the image a background-image of that div, not really practical.

So I think you should just use jquery, simply enqueue the script when needed and append the jquery class to your thumbnail through a hook or directly.

The javascript/jquery trick basically applies 4 corner gifs to the image to make it appear rounded. There are various jquery ones lying about on the interwebs such as http://maestric.com/doc/css/rounded_corners_images.

Just don't tell anyone they are not really round.

  • 3
    "For rounded images in CSS3 you have to wrap the image in a div and make the image a background-image of that div" - absolutely not true. border-radius can be applied directly to an IMG tag, with no problems whatsoever. Commented Apr 30, 2011 at 1:33
  • That jQuery trick is cool. I'd STILL rather do it serverside to keep the amount of js processing on the client side to a minimum
    – Dan Gayle
    Commented May 2, 2011 at 14:57

Here is my take on an using one of the wordpress image filters, I tried using the one suggested by Chip Bennett but didn't have any success.

What I've done is create a custom size and then check each image as it's created if it's that specific size and if it is then apply phpthumb filters. Ideally I would like to be able to just check for the name of the custom image size but I haven't figured out how to do that yet.

add_theme_support( 'post-thumbnails' );
add_image_size( 'rounded-saturated', 250, 100, true ); 
add_filter('image_make_intermediate_size', 'paul_rounded_filter');

function paul_rounded_filter($file) {
    $info = getimagesize($file);

    // check for our image size and do stuff
    if($info[0] == 250 && $info[1] == 100)
        // create phpThumb object
        $phpThumb = new phpThumb();

        // set data source -- do this first, any settings must be made AFTER this call      
        $output_filename = $file;

        // PLEASE NOTE:
        // You must set any relevant config settings here. The phpThumb
        // object mode does NOT pull any settings from phpThumb.config.php
        //$phpThumb->setParameter('config_document_root', '/home/groups/p/ph/phpthumb/htdocs/');
        //$phpThumb->setParameter('config_cache_directory', '/tmp/persistent/phpthumb/cache/');

        // set parameters (see "URL Parameters" in phpthumb.readme.txt)
        $phpThumb->setParameter('fltr', 'ric|30|30');
        $phpThumb->setParameter('fltr', 'sat|-100');

        // generate & output thumbnail
        if ($phpThumb->GenerateThumbnail()) { // this line is VERY important, do not remove it!
            if ($phpThumb->RenderToFile($output_filename)) {
                // do something on success
                echo 'Successfully rendered to "'.$output_filename.'"';
            } else {
                // do something with debug/error messages
                echo 'Failed:<pre>'.implode("\n\n", $phpThumb->debugmessages).'</pre>';
        } else {
            // do something with debug/error messages
            echo 'Failed:<pre>'.$phpThumb->fatalerror."\n\n".implode("\n\n", $phpThumb->debugmessages).'</pre>';

    if ( $width || $height ) {
        if ( !is_wp_error($resized_file) && $resized_file && $info = getimagesize($resized_file) ) {
            $resized_file = apply_filters('image_make_intermediate_size', $resized_file);
            return array(
                'file' => wp_basename( $resized_file ),
                'width' => $info[0],
                'height' => $info[1],
    return false;

If you add that code to your theme's functions.php file, download phpthumb and set the path you should be good to go. I've got it working on my local install of xampp so hopefully it should work for other people too. The phpThumb comments are from the simple demo example.

  • Nice. This is more along the lines of what I was talking about!
    – Dan Gayle
    Commented Jun 1, 2011 at 17:11
  • Did that work for you? Commented Jun 14, 2011 at 10:04
  • Haven't had an opportunity to test it yet. Thanks though!
    – Dan Gayle
    Commented Jun 15, 2011 at 20:05

There is no reason not to do this with CSS it works and will be supported in all major browsers except for IE 8 and below:

If you really want to support IE you can use Modernizr which will add a class of no-rounded-corners on the target img element in incapable browsers.

Add class="rounded-corners" to your thumbnails and in your css:

.rounded-corners {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px;

I did a quick test on a random image on the front page of WPCandy.com by adding the corners to the image class using Firebug. Here are the results.


enter image description here


enter image description here

CSS entered into Firebug:

enter image description here

For your .no-rounded-corners use one of the fallback methods if you feel you need to.

  • Good idea to do this using Modernizr. Still need it server side though.
    – Dan Gayle
    Commented May 2, 2011 at 18:08
  • Of course, one of the sites in question still has 80% IE<9 traffic
    – Dan Gayle
    Commented Jun 1, 2011 at 17:14

What thumbnails are you wanting to style, the "thumbnail" image size in general, or Post Thumbnails?

Both can easily be accomplished via CSS - specifically, the border-radius property; the specific answer will depend on your exact needs. I'll be happy to update.

P.S. IMHO going to TimThumb/cached image route is sub-optimal. Just use the WordPress-generated, square-cornered images (that are already part of the object cache), and use CSS to round the corners.

  • 1
    border-radius doesn’t apply to images. That is really tricky.
    – fuxia
    Commented Apr 30, 2011 at 0:00
  • Border radius on Mozilla will have the square corners pointing out if you apply it to an img tag
    – Dan Gayle
    Commented Apr 30, 2011 at 0:05
  • It must be applied as a background-image for div wrapper, which is pretty impractical.
    – Wyck
    Commented Apr 30, 2011 at 0:11
  • border-radius works directly on img tags in current mozilla.
    – Milo
    Commented Apr 30, 2011 at 0:36
  • What Milo said. border-radius works just fine on images. I use it for comment Gravatars in my own Theme. Commented Apr 30, 2011 at 1:32

Upon a google search it is possible to round corners with GD but the results aren't the greatest; they're a bit jaggy; but that's a subjective call on my part: http://www.assemblysys.com/dataServices/php_roundedCorners.php

If you must do this; i recommend using the timthumb script as a starting point:

Timthumb project: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow also has a post about this: https://stackoverflow.com/questions/609109/rounded-corners-on-images-using-php


Have you taken a look over at ccs3pie Rounded Corners And CSS3 hacks for ie this should do what you want aswell as forcing good old ie into submission to comply.

  • This would be ideal, but I have never gotten it to work consistently. I've pulled my hair out over this one.
    – Dan Gayle
    Commented Jun 1, 2011 at 17:12

OK this is easy!!

First up like people have said the best, cleanest, and easiest way is to use css3 border-radius. This works in most modern browsers, except the typical IE6-8 which has no support...although IE9 will do.

.round {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

SO if you are like me and your clients all use IE then I'd recommend CSS3 Pie as above http://css3pie.com/. The only drawback is it messes with z-index of images so if you're using a slider which fades you may get issues.

If you don't fancy using CSS3 Pie I'd recommend http://jquery.malsup.com/corner/. You simply link it in your header, along with jQuery and use the following:


It picks up the CSS3 declaration and for any browser that doesn't support it, it renders the rounded corners via jquery.

We recently used both these on a clients website here: http://www.theathenaprogramme.co.uk/

Job done :-) Hope this helps.

Edit: Just noticed you need this to be done before the image is saved via media.php. Think my solution isn't applicable in this case.


I've used the Get Post Image plugin to do this here: http://surfhatteras.com/

Get Post Image is a wrapper for Get The Image WordPress Plugin and phpThumb library.

Using it you can do something like <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> to round the corners of a posted image. Or you can you wrap your images yourself: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Don't forget to cache! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.