CSS and Round Corners: Build Boxes with Curves

[themightystephen]

Thats a good technique of doing rounded corners but it would be so much easier if all browsers supported a css property for rounding corners like in Mozilla.

[Anonymous]

Quote: Thats a good technique of doing rounded corners but it would be so much easier if all browsers supported a css property for rounding corners like in Mozilla.

I agree. I fail to see the benefit of the method shown in this tutorial over just using image tags.

[Type-O]

The advantage of this method over image tags from a semantics point of view is quite obvious although it's a pity that 4 divs are needed to get all the corners right. But 4 div's are still to be prefered over meaningless images for layout cause those are leftovers from the spacer-age way of thinking.

I haven't checked what rounded corner css in mozilla can do but I guess that drop shadows etc. will still force you to go for the solution ion this article.

If the width is fixed, which might be the case for quite some page layouts, one can do with just two div's. :)

[omnicity]

I haven't checked what rounded corner css in mozilla can do but I guess that drop shadows etc. will still force you to go for the solution ion this article.

If I understand correctly, there is a CSS3 handler for shadows, and it is supported by Safari & Konqueror

[andrew]

what's wrong with using FIELDSET?

[theharmonyguy]

andrew: FIELDSET is for form elements.

Trenton, I think your technique raises an important question - how much markup is too much? I've been working on a modified three-column layout, and to achieve all of my requirements I had to nest a bunch of container div's. The layout looks great, but the HTML gets messy. Sometimes I wonder which is a better trade-off.

[Jan Terje Hellemsbakken]

It does not need to be too messy if you write commented code, and use indentations correctly. I myself use 4 divs round boxes with rounded corners using the following commenting:

<!-- Rounded corners -->
<div class="corner1">
<div class="corner2">
<div class="corner3">
<div class="corner4">

[Content of box goes here]

[nagrom]

I use fieldset a lot, but setting background colors is a disaster (they bleed out of the corners, and into the legend.
You can however get a nice effect by giving your legend a border and bgcolor, but it doesn't print well cross browser.

[brainlesswonder]

My God, what a bunch of cranky *******s!

[bigEdoggy]

What if you wanted to make a box that had the top portion a bit thicker to put text in it such as "navigation" and you made the background color the same as the border color. Then under it you would place the navigation elements with a white background? Hope I explained this properly. I used to do this in tables by having the top <td> hold the content box title with say a grey background color. I also would make the bottom <td> a bit thicker say 3px and build the table so that there was a 1px <td> on the left and right that were grey and I kept the middle "content" <td> white. I would like to do this with CSS and have it show up properly. I don't want to scare you with some of my results so far. ;-)

[Stuart Young]

Nice, but how would you use this for pull quotes where there is only two images (for the quotes - top-left and bottom-right) but the images need to be fully inside the background colour not straddling the edge of it?

I got it working with 4 containers - the outside one adds the background colour, then the next one does the bottom-right quote image, then comes the top-left quote, and finally the inner one does the padding.

I couldn't get it to work trying to get the background colour and padding styles into the quote image containers - maybe negative numbers for the image position could have solved this but I didn't want to go there.

[sabai]

What if you wanted to make a box that had the top portion a bit thicker to put text in it such as "navigation" and you made the background color the same as the border color. Then under it you would place the navigation elements with a white background? Hope I explained this properly. I used to do this in tables by having the top <td> hold the content box title with say a grey background color. I also would make the bottom <td> a bit thicker say 3px and build the table so that there was a 1px <td> on the left and right that were grey and I kept the middle "content" <td> white. I would like to do this with CSS and have it show up properly.

Think what you're looking for is what I have put on my website, check the signature for link. Feel free to copy and modify according to you own wishes.

Let me know if you need help making it fit your content.

[mike]

Hi, 4 divs to get there are ugly. Check the professionals: dig a little bit in mozilla.org horizontal menu to see how this stuff should be done: simple but impressive.

[Jeremy]

Why would you go through all this when i can just make an image that looks just like this in PhotoShop??

[brainlesswonder]

Why would you go through all this when i can just make an image that looks just like this in PhotoShop??

If you want the content of the box to be dynamic, or the box to expand and contract on window resizing, a photoshop box wouldn't work. Likewise, if I wanted to be able to change the color of the box on the fly, photoshop would not be a very useful tool. (In that case I would use Nifty Corners).

[Markdidj]

If you do want fixed size divs then go with photoshop. I have on my website, after going through all methods, javascript, no javascript and fixed size. I went with fixed size in the end as it works in all browsers with or without js. Best option IMO, 1 whole picture that covers my site is smaller in filesize than the collection of borders, the css and the javascript. Don't be put off by accessibility issues either, a dynamic css sheet can be written server side depending on the size required.

Also, if you want to go with the js option, you can get a smaller function by using the innerHTML rather than all DOM, it works on as many browsers. http://www.sitepoint.com/forums/show...4&postcount=17

[Markdidj]

Here's another method as well, which could be of use to some (for fixed size sites)

function border() {
for(i=0;i<arguments.length;i++) {
posize=arguments[i].split(",");
document.write('<div style="position:absolute;top:'+posize[0]+'px;left:'+posize[1]+'px;width:'+posize[2]+'px;height:'+posize[3]+'px;z-Index:0;">');
var divW=posize[2];var divH=posize[3];
document.write('<div class="tlc tbg" style="position:absolute; left:10px;width:'+(divW-20)+'px;height:30px;" style="background-image:url('+bfolder+'t.gif)"></div>'+
'<div class="trc rbg" style="position:absolute; top:10px;width:10px;height:'+(divH-20)+'px;" style="background-image:url('+bfolder+'r.gif)"></div>'+
'<div class="brc bbg" style="position:absolute; right:10px;top:'+(divH-10)+'px;width:'+(divW-20)+'px;height:10px;" style="background-image:url('+bfolder+'b.gif);background-repeat:repeat-x"></div>'+
'<div class="blc lbg" style="position:absolute; bottom:10px;width:10px;height:'+(divH-20)+'px;" style="background-image:url('+bfolder+'l.gif)"></div>'+
'<img alt="MaxFire" class="tlc" src="'+bfolder+'tl.gif">'+
'<img alt="MaxFire" class="trc" src="'+bfolder+'tr.gif">'+
'<img alt="MaxFire" class="brc" src="'+bfolder+'br.gif">'+
'<img alt="MaxFire" class="blc" src="'+bfolder+'bl.gif">')
document.write('</div>');
}}
 
border("10,10,200,100","10,220,540,100","450,10,200,130","120,220,540,320","450,220,540,130","120,10,200,40","160,10,200,40","200,10,200,40","240,10,200,40","280,10,200,40","320,10,200,40","360,10,200,40","400,10,200,40","10,770,200,570");

Used for animated borders at www.maxfire.net

[john]

And a method that doesn't use images at all: http://pro.html.it/esempio/nifty/

[kservik]

I cant understand it is still this hard to fix it without images.

[Dark Visor]

Check this out - curves with no images.
http://www.stunicholls.myby.co.uk/boxes/krazy.html

[Markdidj]

Just as a test I looked at the file size difference between the css and HTML of the "Barrel Shape" box and a gif alternative.

css + HTML = 1.4kb approx
gif = 415b approx (background-image only)

Nice bit of work though.

[Phil]

The only problem with this is that the html has no semantic meaning. You may as well use tables to do the rounded corners. I personally use a javascript solution that degrades gracefully and is unobtrusive. It also generates the rounded corners without images, so it's easy to change the colors etc. on the fly.

[greg.harvey]

Nice example, Dark Visor!

Markdidj - take the cornered box example though. GIF size = 415b approx. times by four plus the markup and edge graphics - CSS starts to look better in that situation.

I tried the example in a load of browsers and it seems solid too.

G

[Finwesk]

I have experimented with the same technique and have developed methods to make complex bounding boxes with only the CSS providing the design.
www.melvinwallerjr.com/ tutorial/ framed/

Semantic and contextual information is still provided in the markup. The technique allows for reusable code and a separation of content and design.

Internet Explorer can have some layering issues when drawing the complex boxes at times, but it works flawlessly with Firefox and Opera. Should you know an IE fix, I'd be interested.

[Daniel]

With CSS3 comming soon you should into the new Border Radii tags they let u do this inline with css