Whats the best way to do rounded corners on boxes?

Whats the best way to do rounded corners on boxes and why ?

I know there old hat etc , but people want them so, the question still remains.

I agree with cranial. I don’t mind have straight edge degredation in IE if the method works in other browsers.

Seams pretty neat. I’m going to test it at home, with the moz borders radius. Sounds easy.
I worked before with moz opacity and other stuff to blend images, but it also didn’t work in every browser.

Interesting topic!

Just read it through and saw a few useful links.

On this one I got reffered to [URL=“http://blog.benogle.com/2009/04/29/css-round-corners/”]this example tutorial.

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

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

Here they use the <b> tag to attach classes to and to make it rounded. It works, but I guess the <b> tag isn’t meant to be used for this. I personally wouldn’t feel satisfied by myself using that kind of method.
It’s actually like the same discussion as tables aren’t meant to design a website.

If your employer insists on providing IE with a rounded-corner solution, is it worth-while to use IE-based conditional comments to include IE-specific scripting that adds IE-specific markup after the page loads to achieve rounded corners for IE?

Usually I will just go with CSS rounded corners, and let IE have sharp edges. I think this is an example of where the effort of providing a design effect to all browsers is not (usually) worth it.

Yes I definatley agree. Imagine the car industry trying to create a car for everyone, what about the people who are only 2 foot high ? what about the blind people ? What about people using deisil fuel? What about women drivers ! joking girls ! They dont make one car , they make different cars for different users, rather than try and build a site that works averagly for everyone, make individual sites for those special cases, just like the car industry. "big crash bars and 4x4’s for the ladies, seems to be the trend for mums dropping kids at schools, its only an observation ladies. Dont shoot the messenger.

if you must have rounded in IE you can use this jquery.


I now go with Paul’s recommendation. Use css3 and let it display correctly in the real browsers.

alternatively, instead of using any jquery or java, just create images. it might not always be the best solution, but since you know what the width is you can create a top and bottom that you place inside with a middle that gets repeated :slight_smile:

Yes, it’s best to stay away from individual images for such things and use sprites instead.

I have no objection to that, if it’s easy enough to implement.
What I don’t like is the idea of manually producing various corners and having to write more complex markup and CSS for a visual effect that may not have any impact on a lot of users. I also don’t like the idea of the extra HTTP requests for individual corner images.

If there are only a few elements with known pixel sizes (e.g. a search div) a single background image can work, and is pretty easy to implement.

well the 4 corner one doesnt work in I.E. so I went for the moz one and thought it was better to jazz the site up with other simple graphics or tell the client rounded corner arnt really what he wants and the reasons why, which is the best way, let em have it in Moz and not in IE. better off going for a graphic border that got more design in and is a whole lot more than just rounded, sell a bit of illustrator photoshop to them instead, that way the effect can have infinate possibilities, its only a few bites extra on a sprite. WHAT DO YOU THINK OF THAT ?

Round corners have always been a pain and I always try to steer the client away from them. I’m quite happy to let IE have square corners and others get border radius. If you can talk the client into something easier for IE then all the better :slight_smile:

However, sometimes the client insists so you just have to bite the bullet and code them the best way possible (which is a real pain if they are transparent). I’ve used the javascript corners for IE but on one large site we had to remove them because they took so long to draw and held everything up (it was a very large page though).

There are loads of different methods but all are quite similar and to do the same thing and require extra mark up in some form.

No we don’t usually close threads or marked them as solved in case you want to come back tomorrow when you find there’s a mistake :slight_smile:

Just saying thanks and that it’s fixed is enough (as you have done) :slight_smile:

thanks very much everyone. How do I mark the post as solved , do I have to ?

I want the height flexable , the width fixed .See the right hand of this.www. What do you think of there technique, i’m copying it and seeing what I come up with.

Heres my solution, its not corners graphics but a bottom graphic and top graphic, as theres a speach bubble point on the bottom of it. I was going to put two top and bottom graphic holding divs in a container div with left and right borders and the content in the middle. Should I favour the extra div on the bottom for the bubble point graphic or save code and just image the top and bottom instead of 4 corners and the bubble point? Or something completely different.

create image corner cuts and add them with your css and code.

i know there is a way in your css where you can use the radius class, but not all browsers support that.

sorry, i thought you just asked about the best way to do it not exactly how to do it. They way you choose to approach this depends on some various things that needs to clarified first. Would this box with the rounded corners have a standard width and height? or standard width with flexible height? Or the height standard and width flexible? i’ll be able to help you better once i know all the details :slight_smile:

[COLOR=“DarkOrange”][B]MegaPixel Journeys[/B][/COLOR]

well , I did actually know that bit, but thanks anyway. If I want to build a house do I just take bricks , mortar and timber put them together with my tools ! Which tools, which mortar , how its constructed etc. may be usefull.

divs in divs or span in divs , background images or inline images for the corners , its thing like that , i’m interested in.

There’s mainly two different ways.

  1. Old-style rounded corners where Internet Explorer can show them too, but it means using extra images and adding extra code to the HTML markup.

  2. New-style rounded corners where IE is not currently capable, but CSS ensures that rounded corners don’t require extra images or added markup code.

It’s also possible to use JavaScript-based corners to add the extra code to your markup, so that you can retain clean HTML code while also allowing Internet Explorer to enjoy the party.

Here are also some tables that tabulate the differences between rounded corner techniques.