HTML and CSS Reference
In-Depth Information
<div class="corner ctl"></div>
<div class="corner ctr"></div>
<div class="corner cbr"></div>
<div class="corner cbl"></div>
</div>
Using JavaScript to add these four corner elements into the HTML
DOM on the fly is a useful way to keep presentational elements out of
your markup and keep your code lean, especially if you are rounding multiple
different blocks on a page.
Drawing Pixels
Taking the positioning of empty elements to an extreme, you can create
1
boxes and meticulously re-create the pixels that draw the corners of
a containing block. This can allow for visual tricks such as anti-aliasing
and changing border radius without having to re-create background
image files, but it also makes for lots of code and markup overhead.
x
1
Like with the earlier four corners solution, you can use JavaScript to
create, plot, and position these extra elements, giving them proper
background-color
. An example of this method is implemented in the
Curvy Corners JavaScript library (
http://www.curvycorners.net/
),
which
uses the
border-radius
property in the CSS document to draw in the
rounded corner when loaded in a browser that doesn't already support
border-radius
.
Border and Background Enhancements
Beyond multiple background images and rounded corners, CSS3 has
a few other tricks in store that will quickly find their way into web devel-
opers' toolboxes. Creating color gradients for background without the
use of images and creating borders with images are both covered in
Chapter 14.
