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.
_
<style>
#myBox {
background-color: #999;
border: 6px solid #000;
}
</style>
<script
src="curvycorners.js"></script>
<script>
addEvent(window,
'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 40 },
tr: { radius: 40 },
bl: { radius: 40 },
br: { radius: 40 },
antiAlias: true
}
</script>
<style>
#myBox {
background-color: #999;
border: 6px solid #000;
border-radius: 40px;
}
</style>
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.
