Jamie Le Souef

Jamie’s Pure CSS round Corners

There have been many solutions on the internet on how to those funky round corners everyone loves. And, in the right application, I love them to. Cutting up image slices in Photoshop and then trying to get them to place correctly in most, if not all, browsers is a pain in the arse! Pixel differences with browsers (namely the dog of a browser -IE6) kills me every time.

I stumbled along a solution a while ago, using CSS can not recall where from, but I’m constantly using it, and thought it best to give out to the re rest of my audiance.. current 5 people (none of which are web designers…).

Anyways, here it all is.

The CSS

/*START RND CNR CSS*/

#sidebar{
width:15em;
background: #9BD1FA
}

#sidebar b.rtop,
#sidebar b.rbottom{
display:block;
background: #FFF
}
#sidebar b.rtop b,
#sidebar b.rbottom b{
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
#sidebar b.round1{
margin: 0 5px
}
#sidebar b.round2{
margin: 0 3px
}
#sidebar b.round3{
margin: 0 2px
}
#sidebar b.rtop b.round4,
#sidebar b.rbottom b.round4{
margin: 0 1px;
height: 2px
}
/*END RND CNR CSS*/

The HTML

<div id=”sidebar”>
<b class=”rtop”>
<b class=”round1″></b>
<b class=”round2″></b>
<b class=”round3″></b>
<b class=”round4″></b>
</b>
<h1>CSS Rounded Corners without using Images. Works in IE6, IE7, Firefox</h1>
<b class=”rbottom”>
<b class=”round4″></b>
<b class=”round3″></b>
<b class=”round2″></b>
<b class=”round1″></b>
</b>
</div>

The Result

Check out this page to see the above sweetness in action.

Related Posts

• October 26, 2007 -- 27 Tips to build a successful SEO website in 12 months
• August 24, 2007 -- Use CSS to create a lightbox effect
• July 29, 2007 -- how to embed youtube videos as valid xhtml 1.0
• September 5, 2007 -- Internet Explorer Conditional Comments
• July 5, 2008 -- Unique Gifts Blog

This entry was posted on Friday, August 3rd, 2007 at 5:27 pm and is filed under CSS, Design, General, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply