Rounded Corners at the Src

CSS-based rounded corner solutions are excellent for website layouts, but it’s just downright silly to envelope a single img tag with two to four extraneous divs just to get some nice rounded corners on that one image. PHP (with its GD library) is excellent for this purpose.

Example image without rounded corners.Example image using the PHP rounded corners script.

Image: Warped by ~eternicode (me).

My PHP script can take any jpg, png, or static gif image (supplied through the “src” GET variable) and apply rounded corners to them. The space left by the corners is transparent, and so blends in with any background you may have applied to your content section.

Using GET variables, you can control various aspects of the output image. Using “rad” or “radius”, you can increase and decrease the size of the corners. The default value for the radius is 20, which I’ve found to be reasonable for most images.

Original image.Image with rounded corners, using radius option.

Image: Let It Shine by ~eternicode.

Using “width” or “height”, you can scale down the image to meet your needs — the specified width or height will be taken as the maximum width or height, in pixels, and the aspect ratio will be maintained. If both height and width are given, the smallest result of the two possible outputs will be used.

Original image.Image with rounded corners, using width option with value of 300.

Image: Minty by ~eternicode.

There is also a “squarification” option, which will reduce either the width or height (whichever is largest) to produce a squared image. If “squared” is specified as true, radius and scaling will take effect as normal, using the new squared aspect ratio in place of the old ratio.

Original image.Image with rounded corners, using squared option.

Image: Convergence by ~eternicode.

The final option, which was kind of an afterthought, is the “format” option — you can choose either “png” or “gif” as the output format. I only added this because with png format, in IE6, the method I used would produce magenta-colored corners, rather than transparent colors. Supplying a gif output fixes this problem for IE6, though the png option is generally preferred.

The source of the script is very well documented, but feel free to ask questions if I missed something.
The example directory.
Active script using a local image, for your experimentation (any other image can be specified through “src”).
Highlighted script source.
Plain text script source.

3 Comments:

  1. Hey!

    Excellent script. I was looking for something like this to avoid using the jquery plugin.

    Thanks for sharing!
    Angel.

  2. Hi Andrew, Great job, a little question…Is there any way to round only the top corners?
    Regards,

  3. Angel, thanks, glad you liked it. :)

    Lautaro, thanks! To round only the top corners, you can change the 5th parameter of the imagefilledrectangle that draws the “left to right” rectangle. In the script, this value is “$cy-$rad”, changing it to “$cy” does the trick. You could also comment out the imagefilledellipse commands that draw the lower corners, to lighten server load a slight bit. I’ve added some comments to the code to indicate the left-to-right and top-to-bottom rectangles, as well as each of the four corners.

No Pingbacks