CSS Rounded Corners
One thing that I’ve learned a lot about in the last year and a half is CSS. Along with any other language, there is not one right way to do things in CSS. But, there’s usually one way that will make your life in the future much easier. The trick is finding it…
I have seen two ways of doing CSS rounded corners. One is creating an image like this:
The problem with this is that every time you need to change the color, you have to change all the images. Yuk!
Another way that I’ve seen this accomplished is using bullets positioned in the corners. My co-worker Nicole created a blog on this (Go Read It). This is a very innovative idea and gets around the use of images which is often nice. However, this can be tricky to implement because it requires absolute positioning and LOTS of elements.
Here’s what I suggest:
Use an image where the inner portion of it is transparent and the outer portion matches the color of your site (white in most of my cases). This way no matter what color you end up using, the rounded corners will match it. Here’s a snippet of HTML for what I’m talking about:
<div id="one" class="curve">
<div class="topCurve">
<div class="tl"> </div>
<div class="tm"> </div>
<div class="tr"> </div>
</div>
<div class="curveContent">
Here's my content, bla bla bla...<br /><br /><br /><br />
Oh yeah, here's some more.
</div>
<div class="bottomCurve">
<div class="bl"> </div>
<div class="bm"> </div>
<div class="br"> </div>
</div>
</div>Here is the CSS:
.curve {
width:300px;
float:left;
background-color:#dddddd;
}
.topCurve {
float:left;
height:7px;
width:100%;
}
.topCurve .tl {
background:url('images/rounded_edge_tl.gif') 0px 0px no-repeat;
float:left;
height:7px;
width:7px;
}
.topCurve .tm {
float:left;
}
.topCurve .tr {
height:7px;
width:7px;
background:url('images/rounded_edge_tr.gif') top right no-repeat;
float:right;
}
.curveContent {
padding:0px 10px;
}
.bottomCurve {
float:left;
height:7px;
width:100%;
}
.bottomCurve .bl {
float:left;
height:7px;
width:7px;
background:url('images/rounded_edge_bl.gif') bottom left no-repeat;
}
.bottomCurve .bm {
float:left;
height:7px;
}
.bottomCurve .br {
float:right;
height:7px;
width:7px;
background:url('images/rounded_edge_br.gif') bottom right no-repeat;
}…And finally, here’s an example of this in action:
Notice that you can change the color on the fly and the rounded corners change too 