CSS3

  • 200618 Nov

    A border-radius solution

    by Peter Gasston

    Posted in Tutorials

    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.

    You can skip to the end and leave a response.

  • Comments

Leave a Comment

(will not be published)

Subscribe to our RSS

OUR SPONSORS

Advertise here?
CATEGORIES
FRIENDS
Meta
TAG CLOUD

©2009. All Rights Reserved. WordPress Consulting by W3 EDGE