HTML and CSS Reference
In-Depth Information
Easy rounded corners
Perhaps even more common than the drop shadow in modern web
design is the rounded corner. Even otherwise simple website designs
often use rounded corners for visual effect.
The lengths web authors have to go to get the rounded corner
look in CSS2 is extraordinary—one popular method involves
adding hundreds of elements to a page just to get rounded
corners on a single element; we'll look at that in this section.
Many of the rounded corners you see on the
web aren't strictly necessary. An engineer
at Yahoo! once created a version of the
company's home page without any rounded
corners and discovered that it reduced the
amount of data a user had to download by
more than 50%. When he showed the two
different versions of the page to designers,
they didn't spot the difference.
CurvyCorners is a JavaScript library for
creating rounded corners on elements. Let's
see how it compares to the new
CSS3
tech-
niques for creating rounded corners.
Standard
Prefixed
7.0
5.0
4.0
3.5
9.0
-
10.5
-
5.0
3.0
OK, I'm going
to create an element
with rounded corners
using the Curvy
Corners JavaScript
library.
Meanwhile,
I'll create an
identical looking
element using
CSS3.
_
