best route for rounded corners?

[kade119]

I have found a few blog posts on rounded corners some talking about CSS 3 and others using nifty corners but wanted to hear from the developers themselves on which is the lightest way of creating a rounded cornered box

thanks

[Helleshtern]

The best way is just use of image background in the place where you need rounded corners. Need some examples?

[kade119]

well i didnt need the height to be fluid just the width so here is what i did, is this okay?



.bar{
width:640px;

height:50px;

display:block;

margin:0px 0px 0px 100px;
}

.bar-l{
background:url(../_graphics/bar-l.png) no-repeat;

width:20px;

height:45px;

float:left;
}

.bar-r{
background:url(../_graphics/bar-r.png) no-repeat;

width:20px;

height:45px;

float:right;
}

.bar-m{
background:url(../_graphics/bar-m.png) repeat-x;

width:600px;

height:45px;

float:left;
}



<div class="bar">
<div class="bar-l"></div>
<div class="bar-m">

content here
</div>
<div class="bar-r"></div>
</div>

[Helleshtern]

General idea is to use "onion skin" technique. Here you can find some explanation: http://www.alistapart.com/articles/onionskin/

This solution is the best because it's "lightweight" and 100% CSS (no scripts = less problems with proper display in different browser).

Both width as height can be fluid and fit the content. When you need fluid width you should use 4 images of corners and put them at 4 div layers. When you need just fluid width or height using of 2 images on 2 layers is enough.

[kade119]

do you happen to have a link to a different example that doesn't involve a shadow effect that i could follow?

thanks

[Helleshtern]

This example shows general idea how to use it. I guess it's not so hard to imagine corners instead of shadows and use this technique for making rounded corners in DIVs.