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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/*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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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.

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.

There are 2 Responses to “ Pure CSS round Corners ”

1

Paul Says

Great solution, the latest HTML/CSS specs have rounded corners (about time too), but it will be a while before it is supported by even the newest browsers. So this is a good stop-gap.

Pauls last blog post..Kent coast

March 24th, 2009 at 5:25 am

2

Jamie Le Souef Says

Thanks Paul.

CCS3 does include spec’s for both web webkit browsers (safari) and Mozilla browsers (firefox). The code looks like this:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

The problem I see with this is that we need to use 2 different rules for 2 different browsers… Seems a bit backwards and against the whole idea of CSS.. but we’ll see how it goes.

March 24th, 2009 at 8:27 am

Leave a Reply