~~ CornerZap ~~

This script is another implementation of the ideas first presented by Alessandro Fulciniti with his Nifty Corners, version one and two. The basic idea is to generate round corners in HTML pages without the need of images; only JavaScript and CSS (and a fairly recent browser) are required. The original scripts are already quite useful, but this one is completely rewritten and has several advantages:

See a Demonstration (besides this page of course). This script has about 19 kB of code (compressed about 10 kB) and is therefore considerably larger than Alessandro's code.

Usage is as follows:

Example:

<html>
<head>
<style type="text/css">
@import "cornerzap.css";
h1 { background-color: #cde; text-align:center; padding:3px 0; }
</style>
<script type="text/javascript" src="cornerzap.js"></script>
<script type="text/javascript">
window.onload = function() {
CZapper("h1 {}"); CZapDebug();
}
</script>
</head>

<body>
<h1> Hello, World! </h1>
</body>
</html>

The elements receiving rounded borders should have a top and bottom padding that is at least as large as the space needed by CornerZap; otherwise, the size of the element would grow, and the resulting layout would be changed. CZapDebug() shows warning messages about such cases. See the result. Note that the size of the H1 tag increases slightly after rounding the corners, and the ensuing warning message. By increasing the padding (in the CSS declarations) of H1 by at least the suggested amount, this problem goes away.

These are the externally useable functions:

The string argument to CZapper looks like a CSS declaration, e.g.

"h1 { bottom:8; smooth; } #nav { left; border:#abc; }"

The selectors work like in CSS, e.g. tag, tag#id, #id, tag.class, .class, #id .class etc, while the declaration can use any of the keywords listed here:

tl, tr, bl, br
Apply to the given corner(s): top left, top right, bottom left, bottom right. Each one can be followed by a radius (in pixels), like this: CZap("h1", "tl:5; br:9");. You can not specify the radius in other units than pixels.
top, bottom, left, right
Shorthand notation for two corners at a time, e.g. top is the same as tl and tr combined. These parameters can also be followed by a radius.
all
Apply to all corners. This is the default. Can be followed by a radius.
border
Add a border; you can optionally specify a width (default is 1) and a color (default is #777), like this: CZap("div.mytag", "border:1 #f00;");
smooth
Add an anti-aliasing effect to the borders. This cannot be used when the foreground is transparent. It can be combined with border:n, though, which has the effect of automatically calculating a border color.
fg, bg, fgtop, fgbottom
Explicitely specify the foreground color (fg, this is the "inside") and the background color (bg, the "outside"). As a special case, fg can be transparent (usually automatically detected). In this case, the tag has a background image that should extend into the rounded area. This cannot be used with smooth for technical reasons. As a temporary workaround, the foreground color can be specified differently for top and bottom. This should soon be integrated into the top and bottom keywords.
width, height
Informs CZapper that the element has a fixed width and/or height. This will result in more accurate sizing of the element and correct positioning of the lower corners.

Default values

Hints, Limitations

While developing and testing this script, I have noted various caveats. To spare you falling into these traps too, I describe them here.

Hints for IE

IE has certain, uh, "features", which makes it difficult to develop for. If you can use Firefox or other Gecko based browsers, but alas, many uninitiated folk are (still) using IE...

That's it. Feedback can be sent to wolfgang . oertl at gmx . at. Released 2006-03-12. Share and enjoy.