Creating rounded corners

Revision as of 17:13, 2 March 2008

Introduction

This chunk should take the reader through a step-by-step procedure for creating the corner images using a selected open source image editor (eg. The Gimp), placing the image files in the correct location in the template directory and amending the template file to use the "rounded" module style. It should be illustrated by suitably annotated screenshots.

The theory

In order to avoid the problems described above, we use separate images to provide the four corners of our rounded box. In order to ensure that the border of our rounded box is always continuous, these images need to be big enough to completely fill our container at the maximum permissible size. To provide our rounded box at sizes below this maximum, we place the images into four layers, overlapping one another, to create the illusion that the border of our rounded box is unbroken.

Rounded corners

1. Firstly, a large image containing the left-hand and top borders, and the top-left rounded corner, is placed at the top left corner of our container <div> (outlined in red for clarity). The image is bigger than required for this container, and so extends beyond the bottom and right-hand edges; this is shown in partial transparency in the animation to illustrate the process, but would not be seen in practice.
2. Next, a thin horizontal image containing the bottom border and lower-left rounded corner is placed at the bottom left corner of the the container <div>, on top of the first image. This image has been given a thin border in a darker pink to illustrate the process; this border would not normally be used. Again, it can be seen that the image extends beyond the right-hand edge of the container.
3. Thirdly, a thin vertical image containing the right-hand border and top-right rounded corner is placed at the top right corner of the container, on top of the second image.
4. Finally, a square image containing just the lower-right rounded corner is placed at the lower-right corner of the container.

Putting it into practice