CSS Round Corners

4292009

Note: this post has been moved from the yosle.com blog, which I am in the process of taking down.

Round corners. Something that should be easy, right? Not so much. It seems they were left out of the CSS (less than 3) specification. No matter, there are a couple of ways to hack them out and make them look good. Basically there are two techniques: layering a few empty tags, and using images. There are some ways to do it with javascript as well, but I wont cover them because javascript is unnecessary. The layering technique is the most concise and clean, IMO, so that’s what this post will focus on.

Err… No images? No javascript?

The line-layering technique uses no images and no javascript, only display: block bold tags layered on top of each other. We simply create lines with decreasing side margins, stick them on top of each other and we have a well-emulated round corner. First I’ll show, then explain.

Do you want round fill??

And the code

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

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

You notice that there are four b#f definitions. Each one represents a single 1px tall line. Element b1f is shorter than all the other lines, b2f is a little longer, b3f is longer still, and b4f is almost the size of the main content element. This is easy to see if we change the color of each line.

.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;}
Each bold tag class is a separate color. The box doesn’t look round here, eh?

Now that we have the basics down, this technique is easy to extend. Maybe you want a block with a border. Thats pretty easy too. We just add 1 pixel side borders to the b2f, b3f, b4f, and content definitions.

A border perhaps?

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

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

Can we go further? I think so. It could be that you want a box with a special color for the header. Well, it turns out thats not very difficult, either.

Here is your Header!

Look ma, no images!

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

<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 to this technique, however. If you want a box with big radii on the corners, you will be creating a lot of bold elements for each box. As the radius gets bigger, it also becomes harder to figure out the margin for each line. Another drawback is the ’sharpness’ of the corners. Images will produce smoother, anti-aliased corners. If the corner radius is small, its hardly noticeable, though.

Images

Images are the more versatile alternative. They are a bit more difficult to use and are much more clunky code-wise unless your boxes are a fixed size. The general approach for variable size boxes using my favorite technique, the thrashbox, is about as follows: make an over-sized image of the complete box, anchor one corner of the image, then overlay the other three corners in their respective places.

No sense in explaining it in depth as its been hashed out many times. I will, however, point you to the most awesome site regarding the technique. The site is called SpiffyBox. Not only does it show you how to do it, it has a little app that creates images for you based on your criteria! Cooool. The image creator was the selling point for me.

Another image technique is to use four separate images. This post outlines how its done very nicely.

CSS3

There is a border-radius property in CSS3. Check out this post for more information.

Post a comment or leave a trackback. Posted April 29, 2009 at 8:02 pm, under Uncategorized.

Discuss

1
link
lev  May 18, 2009 at 11:07 pm

The Best explanation on web about css round corners
Especialy with the different color example.
Thank you!

2
link
Edward  May 19, 2009 at 5:46 pm

Very cool solution! Thanks!!

3
link
Larry  June 16, 2009 at 11:06 pm

I’ve seen this technique with asp.net ajax controls. The corners are not very smooth, do you see the same problem? When I want to use images for this rounded corner div technique, I use http://www.easyimg.com. Very slick, no javascript, no programming, no photoshop.

Nice work!

4
link
lhoylhoy  June 30, 2009 at 4:17 am

Is this technique used in the industry? Is this what pro designers do? If not what does the pros do? Coz if it is, I really admire this one!

5
link
Ben Ogle  July 3, 2009 at 11:55 am

At one point in time, GMail used this technique for the corners of their left-side tool boxes. Their radius was smaller than mine, though.

6
link
Sarah  July 22, 2009 at 5:47 am

I have tried other no-image options including this one, but when I load the page in Firefox 3.0.11 and IE7, there is a 20-30 px space above and below “contentf”. I tried changing the margins, but nothing gets rid of this space…am I missing something in the code? (I copied it as is from here.) Thanks!

7
link
H  July 24, 2009 at 8:33 pm

excelent posting!

8
link
nasir-hawkeye22  July 26, 2009 at 2:40 pm

good trik
WOW
but I just take this CSS:

#rounded {
position:relative;
z-Index:102;
left:30px;
width:100px;
height:50px;
background-Color:#FFFFCC;
-moz-border-radius:10px;
border:solid #FF6633 3px;
text-align: center;
}

AND

this content

9
link
nasir-hawkeye22  July 26, 2009 at 2:43 pm

good trik
WOW
but I just take this CSS:
//
#rounded {
position:relative;
z-Index:102;
left:30px;
width:100px;
height:50px;
background-Color:#FFFFCC;
-moz-border-radius:10px;
border:solid #FF6633 3px;
text-align: center;
}
//

AND

//
this content
//

Try It, Enjoy..!!!

10
link
diwakar  September 1, 2009 at 8:23 am

i want the width of the div to be 100px with rounded corners

how to do this ??

11
link
Ron  September 14, 2009 at 2:54 am

@diwakar

Wrap the rounded corners code in a div and give that div this style:

width:100px;

12
link
Jay  September 14, 2009 at 5:34 am

Hi Guys!

I’m building my first real website and i want to implement the round corners in my current design: http://www.poolblaster.nl/woest.html

Problem is i just can’t get the css into my current design.

Can anyone help me how to get the box with a special color for the header into my sidebar lists?

Many thanks, Jay!

13
link
Jamie  October 23, 2009 at 1:45 am

@Sarah, I’m no expert but I had the same problem, I added a at the end of my text in “contentf” and this cleared the spacing problem.

text text text

As I say I’m no expert but it worked for me.

14
link
zyrtsuryu  October 27, 2009 at 5:04 pm

it doesn’t seem to work when you place one rounded-corners div inside another. can anyone help me? it works okay, but the second, internal div is pushed in 5 pixels on both sides.

15
link
Extend Studio  November 10, 2009 at 2:43 am

You could try FlexiPanels CSS, Dreamweaver extension that generates rounded corners css boxes from an easy to use interface.

http://www.extendstudio.com/product/flexipanels_css.html

16
link
Gero Z.  November 27, 2009 at 5:12 am

Thanks a lot - I love this, works fine for me in IE6+ up to IE8 and in all other major browsers (Firefox, Opera, Safari, Chrome). Awesome!

17
link
Arturo B  December 24, 2009 at 8:24 pm

I’m glad i found your website, your solution really worked, now i have rounded corners on my site and it’s much better. Thank you.

18
link
Zach  December 31, 2009 at 10:30 am

great code! i am just trying to figure out how to add ul and li to the div…it is doing some funky stuff when i start to play with it. any ideas on how to create some customized li’s?

19
link
roger  January 8, 2010 at 4:35 pm

This is a very cool trick but i wonder how can we set the height of the box ?

20
link
admin  January 18, 2010 at 7:39 pm

So, you can just set the height of the content div for height settage of the entire box. Something like:

.content{ height: 200px; }

21
link
Pepe  February 23, 2010 at 11:34 am

Great code, thank you very much for your help. So simple, so practical.

Saludos!

22
link
Costa  April 28, 2010 at 8:21 pm

Thank you, this is great! Trying to hack rounded corners is one of the biggest headaches CSS has given me :).

23
link
John  May 20, 2010 at 9:57 pm

@ Sarah and Jamie

I figured you need to set the margins of the inner most box model to auto. If you don’t set the margins at all it pushes the corner sections away from the inner content box.

24
link
Monika  July 12, 2010 at 11:54 pm

Fantastic tutorial, thank you for sharing! Takes a lot of pain out of doing rounded corners, and without images even better, cheers!

25
link
Frank Martin  July 14, 2010 at 6:35 am

This looks just like what my associate was looking for. Thank you for sharing, forwarding to him.

26
link
Henry Cole  July 16, 2010 at 10:06 am

Best way of doing this i’ve seen. Brilliant work, thanks very much.

27
link
TimH  August 26, 2010 at 9:25 am

Nice job! I made some changes for using various colors but it’s essentially the same CSS as the original:

.b1Gray, .b2Gray, .b3Gray, .b4Gray, .b2bGray, .b3bGray, .b4bGray{font-size:1px; overflow:hidden; display:block;}
.b1Gray {height:1px; background:#aaa; margin:0 5px;}
.b2Gray, .b2bGray {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3Gray, .b3bGray {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4Gray, .b4bGray {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bGray, .b3bGray, .b4bGray {background: #ddd;}
.headGray {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headGray h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contentGray {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contentGray div {margin-left: 12px; padding-top: 5px;}

.b1Blue, .b2Blue, .b3Blue, .b4Blue, .b2bBlue, .b3bBlue, .b4bBlue{font-size:1px; overflow:hidden; display:block;}
.b1Blue {height:1px; background:#A6BBEA; margin:0 5px;}
.b2Blue, .b2bBlue {height:1px; background:#A6BBEA; border-right:2px solid #A6BBEA; border-left:2px solid #A6BBEA; margin:0 3px;}
.b3Blue, .b3bBlue {height:1px; background:#A6BBEA; border-right:1px solid #A6BBEA; border-left:1px solid #A6BBEA; margin:0 2px;}
.b4Blue, .b4bBlue {height:2px; background:#A6BBEA; border-right:1px solid #A6BBEA; border-left:1px solid #A6BBEA; margin:0 1px;}
.b2bBlue, .b3bBlue, .b4bBlue {background: #D4DAE6;}
.headBlue {background: #A6BBEA; border-right:1px solid #A6BBEA; border-left:1px solid #A6BBEA;}
.headBlue h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contentBlue {background: #D4DAE6; border-right:1px solid #A6BBEA; border-left:1px solid #A6BBEA;}
.contentBlue div {margin-left: 12px; padding-top: 5px;}

.b1Red, .b2Red, .b3Red, .b4Red, .b2bRed, .b3bRed, .b4bRed{font-size:1px; overflow:hidden; display:block;}
.b1Red {height:1px; background:#EAAAAA; margin:0 5px;}
.b2Red, .b2bRed {height:1px; background:#EAAAAA; border-right:2px solid #EAAAAA; border-left:2px solid #EAAAAA; margin:0 3px;}
.b3Red, .b3bRed {height:1px; background:#EAAAAA; border-right:1px solid #EAAAAA; border-left:1px solid #EAAAAA; margin:0 2px;}
.b4Red, .b4bRed {height:2px; background:#EAAAAA; border-right:1px solid #EAAAAA; border-left:1px solid #EAAAAA; margin:0 1px;}
.b2bRed, .b3bRed, .b4bRed {background: #EBD5D5;}
.headRed {background: #EAAAAA; border-right:1px solid #EAAAAA; border-left:1px solid #EAAAAA;}
.headRed h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contentRed {background: #EBD5D5; border-right:1px solid #EAAAAA; border-left:1px solid #EAAAAA;}
.contentRed div {margin-left: 12px; padding-top: 5px;}

.b1Yellow, .b2Yellow, .b3Yellow, .b4Yellow, .b2bYellow, .b3bYellow, .b4bYellow{font-size:1px; overflow:hidden; display:block;}
.b1Yellow {height:1px; background:#D8DA38; margin:0 5px;}
.b2Yellow, .b2bYellow {height:1px; background:#D8DA38; border-right:2px solid #D8DA38; border-left:2px solid #D8DA38; margin:0 3px;}
.b3Yellow, .b3bYellow {height:1px; background:#D8DA38; border-right:1px solid #D8DA38; border-left:1px solid #D8DA38; margin:0 2px;}
.b4Yellow, .b4bYellow {height:2px; background:#D8DA38; border-right:1px solid #D8DA38; border-left:1px solid #D8DA38; margin:0 1px;}
.b2bYellow, .b3bYellow, .b4bYellow {background: #E1E29A;}
.headYellow {background: #D8DA38; border-right:1px solid #D8DA38; border-left:1px solid #D8DA38;}
.headYellow h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contentYellow {background: #E1E29A; border-right:1px solid #D8DA38; border-left:1px solid #D8DA38;}
.contentYellow div {margin-left: 12px; padding-top: 5px;}

.b1Green, .b2Green, .b3Green, .b4Green, .b2bGreen, .b3bGreen, .b4bGreen{font-size:1px; overflow:hidden; display:block;}
.b1Green {height:1px; background:#85C785; margin:0 5px;}
.b2Green, .b2bGreen {height:1px; background:#85C785; border-right:2px solid #85C785; border-left:2px solid #85C785; margin:0 3px;}
.b3Green, .b3bGreen {height:1px; background:#85C785; border-right:1px solid #85C785; border-left:1px solid #85C785; margin:0 2px;}
.b4Green, .b4bGreen {height:2px; background:#85C785; border-right:1px solid #85C785; border-left:1px solid #85C785; margin:0 1px;}
.b2bGreen, .b3bGreen, .b4bGreen {background: #D3E7D3;}
.headGreen {background: #85C785; border-right:1px solid #85C785; border-left:1px solid #85C785;}
.headGreen h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contentGreen {background: #D3E7D3; border-right:1px solid #85C785; border-left:1px solid #85C785;}
.contentGreen div {margin-left: 12px; padding-top: 5px;}

Then to make the call in the code it would be like this:

Here is your Header!

Look ma, no images!1

or

Here is your Header!

Look ma, no images!1

comment

Your email is never shared because I like you.

*
*