Round corners with CSS

[rf]

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
world.

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:
http://users.bigpond.net.au/rf/tricks/corners1_css.htm

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.

Comments?

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

Cheers
Richard.

 

[Toby A Inkster]

http://users.bigpond.net.au/rf/tricks/corners1_css.htm

Comments?

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.

 

[m]

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
world.

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:
http://users.bigpond.net.au/rf/tricks/corners1_css.htm

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.

Comments?

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

Cheers
Richard.

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.

Cheers,
m

 

[e n | c k m a]

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.

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

Like:

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
it?
How else would you do it?

Nick.

 

[Andrew Fedoniouk]

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:
http://www.terra-informatica.org/htmlayout/htmlex.htm
Section: Background Drawing -> Expandable Tiling

The schema covers all CSS cases and also allows to create backgrounds like:
http://www.terra-informatica.org/htmlayout/images/tileexsample.jpg
from images like:
http://www.terra-informatica.org/htmlayout/images/tileex.png

Live Demo application (nano-browser for Windows) with html samples is here:
http://blocknote.net/htmlayout/HtmLayoutDemo.zip (361k)

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

Andrew Fedoniouk.
http://terra-informatica.org

 

[Nico Schuyt]

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

Use an extra div box.
Example: http://www.nicoschuyt.nl/test/advocated.htm (left and right
background image)
Nico

 

[e n | c k m a]

Use an extra div box.

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

Nick.