A border-radius solution
Recently I had to code a box with rounded corners for a client, and I came up with a solution which works with 99% of the browser market and uses the CSS3 border-radius declaration for browsers which support it.
The simplified HTML code is:
<div class="curves top"> <img src="images/topl.png" width="10" height="10" alt=""/> </div> <div class="box"></div> <div class="curves bottom"> <img src="images/botl.png" width="10" height="10" alt=""/> </div>
The divs .top and .bottom will be hidden from browsers which support border-radius (or a proprietary implementation of it).
The basic CSS is:
div {
margin: 0;
padding: 0;
width: 100px;
background-color: #ff0000;
}
.box {
min-height: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.curves {
display: none;
}
This will display a box 100×100 pixels with curved corners in Firefox and Safari, hiding the .top and .bottom divs and implementing border-radius.
To make it display in IE, we add some conditional comments with extra CSS which displays the .top and .bottom divs with four rounded corner images:
<!--[if IE]>
<style type=”text/css”>
.box { min-height: 80px; }
.curves {
display: block;
height: 10px;
}
.top {
background: #ff0000 url(’images/topr.png’)
no-repeat right top;
}
.bottom {
background: #ff0000 url(’images/botr.png’)
no-repeat right top;
}
</style>
<![endif]–>
<!–[if lt IE 7]>
<style type=”text/css”>
.box {
height: 80px;
}
<![endif]–>
</style>
The main drawbacks with this method are that the CSS won’t validate and it only works with fixed width boxes; however, a little recoding will fix this second problem.
Users of Opera and other browsers will see a square box; as my client is corporate and has never received a hit from an Opera browser, I was willing to make this sacrifice. If they ever implement -opera-border-radius I could add this in.
Of course there are other solutions for this, but I thought this way was quite simple.
Doesn’t o-border-radius work? I do seem to recall they had something like this implemented…
It seems that they used to support it, but I’ve tried both -o-border-radius and -opera-border-radius and neither works, so it looks as if they’ve removed support.
What’s the point of doing it in CSS if you have inline presentational images in the mark-up? Seems like a big addition to the page weight.
Because IE doesn’t support border-radius. It’s not intended to be a definitive solution, just to show a way that I used a CSS3 declaration.
I think proprietary is the wrong to use term. Mozilla is open-source. I think you’re looking for non-standard
Grimboy: It’s proprietary in the sense that the implementation, -moz-border-radius for example, is limited only to Gecko-based browsers. The way it’s implemented (-vendor_goes_here-property) is very much standard … the CSS spec has provisions for this method.
BTW, your site falls over in IE 6.
Now that Opera 9.5b is released, it still doesnt support CSS3’s border-radius property ?
the rounderd borders in not working in IE6 & 7 what is the solution to use the code of css3 for border’s ?