Rounded corners with CSS, no images needed
by JD on Nov.19, 2008, under Development, Technology
Rounded corners are the craze with this Web2.0 stuff and I had to find a solution to create them with no images and no JavaScript. Here’s how I did it.
The basic idea was to make colored lines to create the corners.
Here’s the HTML to get the corners:
-
<div id="container">
-
<b class="rtop">
-
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
-
</b>
-
<!–content goes here –>
-
<b class="rbottom">
-
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
-
</b>
-
</div>
Here’s the CSS you’ll need:
-
div#container {
-
width: 600px;
-
margin: 0 10%;
-
background: #FFF
-
}
-
-
b.rtop, b.rbottom {
-
display: block;
-
background: #004da0;
-
}
-
-
b.rtop b, b.rbottom b {
-
display: block;
-
height: 1px;
-
overflow: hidden;
-
background: #FFF;
-
}
-
-
b.r1 {
-
margin: 0 5px;
-
}
-
-
b.r2 {
-
margin: 0 3px;
-
}
-
-
b.r3 {
-
margin: 0 2px;
-
}
-
-
b.rtop b.r4, b.rbottom b.r4 {
-
margin: 0 1px;
-
height: 2px;
-
}
I used the b element because it can be nested in almost every kind of tag and doesn’t have a semantic meaning.
November 25th, 2008 on 12:31 pm
Cool, might have to give this a shot sometime.