For any web design rounded cornered rectangles add a touch of professionalism and beauty. Unfortunately most methods using either JavaScript or layered images do not work very well on all browsers as expected by the designer or the user.
Finally there is a nice method which works very well with IE7+ and Firefox 2+ perfectly, this is in fact by using CSS3 where 4 rectangles are layered one above the other to emulate a rounded corner and this method unlike others works perfectly with most browsers, although I haven’t tested it with IE6.
Let’s Get Started.
Now we will be adding four rectangles (or lines whatever you wish to call them) which overlap each other, when combined they give the effect of a rounded corner. Now I will give you a small sample which will explain you what I’m trying to say properly.
Add the following in your CSS (stylesheet)
1 2 3 4 5 6 7 | .b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;} .b1f {height:1px; background:#ddd; margin:0 5px;} .b2f {height:1px; background:#ddd; margin:0 3px;} .b3f {height:1px; background:#ddd; margin:0 2px;} .b4f {height:2px; background:#ddd; margin:0 1px;} .contentf {background: #ddd;} .contentf div {margin-left: 5px;} |
Now let’s write some HTML to call these styles
1 2 3 4 5 | <b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b> <div class="contentf"> <div>Round FILL!!</div> </div> <b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b> |
If you Notice properly, b1f is the shortest line but in the highest position, b2f is long and lower ans so on b4f is almost the size of the content. These 4 lines placed in this manner gives the impression of the rounded corner to the user.
To make what I’m saying more meaningful, let us color each of the lines different so they look distinguishable, so lets change the CSS a bit.
1 2 3 4 5 6 7 | .b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;} .b1f {height:1px; background:#F00; margin:0 5px;} .b2f {height:1px; background:#0F0; margin:0 3px;} .b3f {height:1px; background:#00F; margin:0 2px;} .b4f {height:2px; background:#F0F; margin:0 1px;} .contentf {background: #ddd;} .contentf div {margin-left: 5px;} |
Now that you have colored each line seperately you can tell that the rounded effect is emulated by the lines. Now lets extend this effect a little more by adding a border, so lets add a border in the CSS
1 2 3 4 5 6 7 | .b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;} .b1 {height:1px; background:#888; margin:0 5px;} .b2 {height:1px; background:#ddd; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;} .b3 {height:1px; background:#ddd; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;} .b4 {height:2px; background:#ddd; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;} .contentb {background: #ddd; border-right:1px solid #888; border-left:1px solid #888;} .contentb div {margin-left: 5px;} |
1 2 3 4 5 | <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="contentb"> <div>Round Border!!</div> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> |
Now let’s have a rounded cornered rectangle with a special color for the header and and another color for the body, like the following.
1 2 3 4 5 6 7 8 9 10 | .b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;} .b1h {height:1px; background:#aaa; margin:0 5px;} .b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;} .b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;} .b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;} .b2bh, .b3bh, .b4bh {background: #ddd;} .headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;} .headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;} .contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;} .contenth div {margin-left: 12px; padding-top: 5px;} |
1 2 3 4 5 6 7 8 | <b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b> <div class="headh"> <h3>Here is your Header!</h3> </div> <div class="contenth"> <div>Look ma, no images!</div> </div> <b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b> |
There are some drawbacks in this techniques, the more radius you want the more bold tags you need to make, and the bigger the radius gets the more edgier the corner looks like. But for small corners this is the best method. See an example of all these CSS styles in action HERE
Source of the codes: http://blog.benogle.com/2009/04/29/css-round-corners/
http://www.spiffycorners.com/