Monday, 1st August 2005

Rounded

Demo rounded corners PHP source code
Original
Colour Border width
Original Version with rounded border
Is there an easy way to get a rounded border around an image? It is an urgent question for the redesign of the SUMit website.

The SUMit home page contains images that reoccur on secondary pages, such as for the on-line roster program.

Sara Borremans has created a handsome design, with several round corners. So far so good, but translating those round corners into HTML/CSS is a struggle.

  1. Most rounded corners are fine using a CSS border-radius.
  2. Unfortunately, the most common browser does support the border-radius only through a workaround.
  3. Firefox does a fine job rounding borders for images.
  4. The less advanced browsers need a rounded DIV around the image, but te result in Firefox is not satisfactory.
Grr, rounding things with CSS is a disaster in the different browsers. I'll turn mad shortly making images with rounded borders.

So I'll just pospone the CSS rounded images for a year or so. A rebound will be soon enough when the browsers share a common border-radius implementation.

So, what to do now?

The least bad solution seems to outsource the problem to a computer and have it draw the borders. If CSS won'nt do the job yet at the client, well, let the webserver do the job using PHP.

Example

A plain image, without border. The very same image with a green border on a light grey background. The same image again with a purple border on a green background.

Pros and cons

Summary: it works, but remains a suboptimal, temporary solution. Rounded, but not finished.

Till next nut,
Nut