HTML and CSS Reference
In-Depth Information
So far the result
doesn't look any
different, whichever
approach you take.
I agree. Let's
compare the code
we had to write to
get the rounded
corner effect.
#myBox {
background-color: #999;
border: 6px solid #000;
'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 40 },
tr: { radius: 40 },
bl: { radius: 40 },
br: { radius: 40 },
antiAlias: true
#myBox {
background-color: #999;
border: 6px solid #000;
border-radius: 40px;
It's starting
to look like the CSS
approach is the winner. Even
though the CurvyCorners
code isn't complex,
there's twice as much of it. But I think
you've cheated—to get the widest browser
support, you need to add browser-specific
rules to your code.
That's true, there would be four
extra lines in my CSS if this was
production code. I think I'd still
be winning, though!
This isn't a competition, AJ. we're collabo
rating to try to find the best approach!
Let's look at the client-side markup for each.
Search WWH ::

Custom Search