Round corners with CSS

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Most of the stuff I have seen regarding round corners using CSS instead of
tables has been poor. The simple ones break as soon as one changes ones font
size. The better ones are usually div soup, often using divs within divs
within divs to replicate tables.

The specs say it's easy. Just create a containing element and absolutely
position the corner images top/bottom left/right. Doesn't work in the real

Following our recent discussions in the thread "Page not displaying
properly" by Advocated I dusted off some stuff I was fiddling with a year or
so ago.

Here is a concept page:

There are lots of things in there to make the real world browsers work.
However, while there are three div's per section I think it's rather simple
and neat. It seems to be impervious to changes in font size and canvas size.

I've tested it with Mozilla 1.4 and IE6, both quirks mode and non-quirks
mode. There is still a little problem around the nav bar <ul> with Opera 6.
Mozilla at some font sizes, especially very small ones, puts white space
just above the .middle div.


If you like it steal it. If you don't lets see if we can fix it to work
better. If it's been done before then I've just spent an hour re-inventing
some round wheels :-)


Re: Round corners with CSS

rf wrote:

Quoted text here. Click to load it

I think I would prefer it if the images were loaded through CSS (as
background images for example). Including them in the HTML seems a trifle
kludgy to me.

Toby A Inkster BSc (Hons) ARCS
Contact Me -

Re: Round corners with CSS

Quoted text here. Click to load it

Is it possible to display multiple background images using the
background-image property?


background-image: url(Images/topLeft.gif) top left;
background-image: url(Images/topRight.gif) top right;
background-image: url(Images/bottomLeft.gif) bottom left;
background-image: url(Images/bottomRight.gif) bottom right;

That kind of thing?  Would that work?  It wouldn't be valid though, would
How else would you do it?


Re: Round corners with CSS

e n | c k m a wrote:
Quoted text here. Click to load it

Use an extra div box.
Example: (left and right
background image)

Re: Round corners with CSS

Quoted text here. Click to load it

So if you wanted multiple corners you'd have to make a <div> for each corner
of the containing <div> with different background images?


Re: Round corners with CSS

rf wrote:
Quoted text here. Click to load it
Richard, I'm getting a thin white space
(perhaps 1 to 3 pixels)
all the way across the top just below
the corners in Moz 1.4 in both divs.
Don't know what I might have set different
in mine than you have in yours.

My approach with this kind of thing is
to save it for divs that don't have to
contract or expand, and layer the text
over a complete complete pictureframe image.
The image can either
be a non-repeating background or a div
holding the image that is layered over with
another div that holds the text.

But generally, I just recommend people not
do it unless there's some compelling need for
art deco embedded deep in their psyche. ;)


Re: Round corners with CSS

Hi, Richard.

Slightly offtopic but might be interesting for you.

Some time ago I've desined lightweight html renderer for embedding it in
applications as a form layout tool / micro browser.

And there I've implemented different (from CSS) schema of backround filling.
It is more simple and more I would say practical.

The schema described here:
Section: Background Drawing ->  Expandable Tiling

The schema covers all CSS cases and also allows to create backgrounds like:
from images like:

Live Demo application (nano-browser for Windows) with html samples is here: (361k)

I believe this schema being implemented in CSS might reduce need of tables a

Andrew Fedoniouk.

Site Timeline