Monday, 1st August 2005
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.
SUMit home page
contains images that reoccur on secondary pages, such as for the
on-line roster program.
has created a handsome design, with several round corners.
So far so good, but translating those round corners into HTML/CSS is a struggle.
Grr, rounding things with CSS is a disaster in the different browsers.
I'll turn mad shortly making images with rounded borders.
- Most rounded corners are fine using a
- 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.
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.
- 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.
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.