Round Corner Borders using CSS without Images
Using round cornered borders or nifty corners on your web pages instead of those pointed, sharp cornered borders are always a welcome addition when creating your web site. I’m not much of a graphics guru or a top-notch web designer so I went on a quest to find out how to create borders using nifty corners.
Although I would prefer that all the other web browsers support those nifty corners much like the “-moz-border-radius” set of attributes available in Mozilla Firefox, its still on my wish list as of now. Considering that it may never make its way into IE6 and lower version IE browsers, I had to find out how to make them without ever having to touch an image editor to make them.
The result? A round corner border implemented in plain CSS and HTML without using graphic images usually found in other techniques for creating round corner borders in web pages. In fact, I was able to make it work with Firefox, IE7 and IE6 that is why I decided to share them here.
The technique is very simple. Use border and background properties of HTML tags to “draw” the round corners. Try to examine how a regular round corner box is drawn by an image editor like Paint.Net (see the figure below).
I placed numbers (1-5) on sections of the image. In the CSS stylesheet that I use, I’ve rendered section 1 as an object with a 1 pixel height and a background of black with no borders. Section 2 is rendered as a 1-pixel high object with a grey background with a 2-pixel black border (left and right). Section 3 and 4 combined is rendered as a 2-pixel high object with a 1-pixel border and a grey background. Section 5 is the main area of the box and has a grey background with a 1-pixel border on the left and right. The lower portion of the box is just a mirror image of the top.
I chose the <b> HTML tag as the object I will use to render the sections above because it’s short. The required HTML code to create the round corner box is looks like the following code:
1 2 3 4 5 6 7 | <div class="box"><b class="tc"><b class="L1"></b><b class="L2"></b><b class="L3"></b></b><div class="content"> This is the content </div> <b class="bc"><b class="L3"></b><b class="L2"></b><b class="L1"></b></b></div> |
I’ve used a set of <b> HTML tags above and below the content area and everything is wrapped around a <div> container with a class called “box”. Notice how the order of the <b> tags with classes L1, L2 and L3 have been reversed at the bottom.
The <b> HTML tags can be used for creating/drawing the three sections (1, 2 and 3+4) in the figure. The class L1 for section 1, L2 for section 2 and L3 for sections 3 and 4. The CSS styles for the round corner borders will look like the following:
1 2 3 4 5 6 7 8 9 10 11 12 | .box, .box b.tc, .box b.bc{ background-color:transparent; } .box b.tc, .box b.bc,.box b.tc b.L1, .box b.tc b.L2, .box b.tc b.L3,.box b.bc b.L1, .box b.bc b.L2, .box b.bc b.L3{ font-size:0px;padding:0;display:block; } .box b.tc b.L1,.box b.tc b.L2,.box b.bc b.L1,.box b.bc b.L2 { height:1px; line-height:1px; overflow:hidden; } .box b.tc b.L1,.box b.bc b.L1 { margin: 0 4px; } .box b.tc b.L2,.box b.bc b.L2 { margin: 0 2px; border-width:0 2px; border-style:solid; } .box b.tc b.L3,.box b.bc b.L3 {margin: 0 1px; border-width:0 1px; border-style:solid; height:2px; overflow:hidden; } .box .content { border-left-style:solid; border-left-width:1px; border-right-style: solid;border-right-width:1px; margin:0; overflow:hidden; } /* Left-side border color */.box .content { border-left-color:#aaa; border-right-color:#aaa; } /* Top border color */.box b.tc b.L1 { background-color:#aaa; }.box b.tc b.L2,.box b.tc b.L3 { border-color:#aaa;} /* bottom border color */.box b.bc b.L1 { background-color:#aaa; }.box b.bc b.L2,.box b.bc b.L3 { border-color:#aaa;} /* -- Default params for where content is ---- */.box .content { background:#eee; }.box b b.L2, .box b b.L3 {background-color:#eee;} .box { margin:5px; width:300px; }.box .content { padding:5px; } |
its very helpful and work great.
thx for your post about round corner…
my boss would love this border
First of all, thank you for your contribution. But the round corners do not work well after the divs are resized. Is there any easy way to fix it. I am using VS 2008 as desiger.
Hi Longmatch,
Hmmm, you might need to remove the width attribute in div.box and resize using the div.content.
it is useful to me..
At the same time it is not working if i increase the content size
thank you, it works great. well done
Excellent border, but since background elements don’t print, the top and bottom edges don’t print. Here’s an adjustment, if you like. This worked for me in IE6 (Only browser I’ve got.)
1. Change L1 to have border-style: solid
.box b.tc b.L1,.box b.bc b.L1 { margin: 0 4px; border-style:solid; }
2. Change L1 along the top of the box to have a solid border on it’s bottom edge:
/* Top border color and size */
.box b.tc b.L1 { border-width:0 0 1px 0; border-color:#aaa; }
3. Change L1 along the bottom of the box to have a solid border on it’s top edge:
/* bottom border color and size */
.box b.bc b.L1 { border-width:1px 0 0 0; border-color:#aaa; }
Also, to make many boxes of different sizes, I removed the width on the box:
Was this: .box { margin:5px; width:300px; }
I use this: .box { margin:5px; }
And then I put this kind of [div] around each box to be displayed (not sure how your text entry handles HTML, so I’m using [braces] to instead)
[div id=position_and_width style="float:right;width:200px;"]
[rounded box prefix html]
Box content goes here
[rounded box suffix html]
[/div]
Finally: In my IE6 browser, your article text overlaps the left navigation column (!), and starts below the navigation entries (below the link to BlogRoll – Mobile Java).
And really finally: You’ll be pleased to know that you came up #2 on Google when I searched for this: Draw boxes with rounded corners using CSS
Cheers, BobM