Monday, 1st August 2005
Rounded
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.
- Most rounded corners are fine using a
CSS border-radius.
- Unfortunately, the most common browser does support the
border-radius only through a workaround.
- Firefox does a fine job rounding borders for images.
- 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?
- Just forget about rounded corners?
Hmm, that will distort the whole design.
- Start up a drawing tool to round those borders?
No, I don't like the resulting double maintenance.
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