October 6, 2009

PHP Rounded Corner Graphics Generator Script

The following PHP code sample uses GD library functions to dynamically generate rounded corner graphics. This PHP script allows you to specify corner radius, corner color and background color and generates the graphics in GIF format. Use this script to dynamically generate rounded corners that blend nicely into your HTML/CSS design.

<?php
/*
 * Rounded Corner Graphic Generator PHP-GD
 * http://salman-w.blogspot.com/2009/10/rounded-corner-graphics-generator.html
 *
 * Adds round corder effect to existing images
 */

/*
 * corner: corner to render (required)
 * -- 1 = top left
 * -- 2 = top right
 * -- 3 = bottom right
 * -- 4 = bottom left
 * radius: corner radius in pixels (required)
 * colour1: outer colour in rgb hex triplet format e.g. FF0000 (optional -- see below)
 * colour2: inner colour in rgb hex triplet format e.g. FFFFFF (optional -- see below)
 * -- colour1 (or colour2) can be empty to make the outer (or inner) side transparent
 * -- colour1 and colour2 can not be empty at the same time
 */

$corner = $_GET["corner"];
$radius = $_GET["radius"];
$colour1 = $_GET["colour1"];
$colour2 = $_GET["colour2"];

/*
 * 1) create a blank image of desired size
 */

$corner_image = imagecreatetruecolor(
    $radius,
    $radius
);

/*
 * 2) allocate the two colours before drawing
 */

$colour1_copy = $colour1 ? $colour1 : sprintf("%06x", ~hexdec($colour2) & 0xffffff);
$colour2_copy = $colour2 ? $colour2 : sprintf("%06x", ~hexdec($colour1) & 0xffffff);

$colour1_gd = imagecolorallocate(
    $corner_image,
    hexdec(substr($colour1_copy, 0, 2)),
    hexdec(substr($colour1_copy, 2, 2)),
    hexdec(substr($colour1_copy, 4, 2))
);

$colour2_gd = imagecolorallocate(
    $corner_image,
    hexdec(substr($colour2_copy, 0, 2)),
    hexdec(substr($colour2_copy, 2, 2)),
    hexdec(substr($colour2_copy, 4, 2))
);

/*
 * 3) make the outer (or inner) colour transparent before drawing
 */

if ($colour1 == "") {
    imagecolortransparent(
        $corner_image,
        $colour1_gd
    );
}

if ($colour2 == "") {
    imagecolortransparent(
        $corner_image,
        $colour2_gd
    );
}

/*
 * 4) draw the circle
 */

imagefill(
    $corner_image,
    0,
    0,
    $colour1_gd
);
imagefilledellipse(
    $corner_image,
    $radius,
    $radius,
    $radius * 2,
    $radius * 2,
    $colour2_gd
);

/*
 * 5) rotate the image to focus on the requested corner
 */

if ($corner > 1) {
    $corner_image = imagerotate($corner_image, -90 * ($corner - 1), 0);
}

/*
 * 6) output the image -- revise this step according to your needs
 */

header("Content-type: image/gif");
imagegif($corner_image);
?>

With the help of this script, you no longer need Photoshop or GIMP to create and manage rounded corner graphics. Just revise the parameters of the script to match the color scheme of your website and use it in you HTML/CSS layouts.

Example Usage

Place the above code inside a blank file and save it on your webserver as a PHP file; for example round-corner.php. You can then call the script with the desired parameters to generate the images.

40px Red Corners with Yellow Background

<img src="images/round-corner.php?corner=1&radius=40&colour1=ff0000&colour2=ffcc00" />
<img src="images/round-corner.php?corner=2&radius=40&colour1=ff0000&colour2=ffcc00" />
<img src="images/round-corner.php?corner=3&radius=40&colour1=ff0000&colour2=ffcc00" />
<img src="images/round-corner.php?corner=4&radius=40&colour1=ff0000&colour2=ffcc00" />

Round Corner Generator Example 1

40px Red Corners with Transparent Background

<img src="images/round-corner.php?corner=1&radius=40&colour1=ff0000&colour2=" />
<img src="images/round-corner.php?corner=2&radius=40&colour1=ff0000&colour2=" />
<img src="images/round-corner.php?corner=3&radius=40&colour1=ff0000&colour2=" />
<img src="images/round-corner.php?corner=4&radius=40&colour1=ff0000&colour2=" />

Round Corner Generator Example 2

40px Transparent Corners with Blue Background

<img src="images/round-corner.php?corner=1&radius=40&colour1=&colour2=0000ff" />
<img src="images/round-corner.php?corner=2&radius=40&colour1=&colour2=0000ff" />
<img src="images/round-corner.php?corner=3&radius=40&colour1=&colour2=0000ff" />
<img src="images/round-corner.php?corner=4&radius=40&colour1=&colour2=0000ff" />

Round Corner Generator Example 3

Notes

  • This script requires GD library version 2.0.2 or later.
  • These round corners are not anti-aliased -- sorry!