What's the simplest way to do cross-browser rounded borders in HTML/CSS?

Question

I'm not after the 'best' way, that requires a lot of work doing large changes for different browsers, but the 'best easy' way... ideally the least horrible way that would work unchanged on IE7+, FF2+, Chrome. Tables are an option but probably a little too archaic. Is there a middle ground, which uses CSS without a lot of hassle?

And, if you want your borders to be more advanced than simple lines, are images+tables the best/only way, or is there a neat CSS+images solution?

Answer 1

Facebox uses tables, it's pretty much the easiest way to do it and support IE(6|7|8). Otherwise, I'd use border-radius and deliver some non-rounded corners to IE(6|7|8), which is what Google did for the longest time.

Answer 2

Personally I like to use the "sliding door" technique.

The method you use depends on what elements you need to have round corners. Are they going to be fixed width or height? Thats the major question. If you have a fixed width, you can simply make a top image (bkg_top.jpg) and a bottom image (bkg_bottom.jpg) then put the one inside the other.

lets assume you want a 500px wide box with 10px rounded corners and a background color of #555555.

HTML:

<div id="content_box">
  <p>lorem ipsum...</p>
  <div id="content_box_bottom"></div>
</div>

CSS:

#content_box {
background: #555 url(bkg_top.jpg) no-repeat scroll 0 top;
padding-top:10px; /*the height of the top image*/
width:500px;
}

#content_box_bottom {
background: #555 url(bkg_bottom.jpg) no-repeat scroll 0 bottom;
height:10px; /* the height of the image */
}

The bottom div will strech to fill the content_box and create the bottom of the rounded box.

Thats just one example. Here is another good web rounded corners

Answer 3

I don´t know if javascript is an option, but if it is, I would recommend jQuery Corner.

It applies css corners to the browsers that support them and scripts corners for the browsers that don´t (IE...).

Answer 4

Check out the CSS Play site, it has a lot of "snazzy borders" and "krazy korners"

Answer 5

Agreed if the rounded-corner box is not fluid, and fixed in width then you should simply use 2 images as demonstrated above. You could even add the bottom rounded corner image to the last element appearing in the box depending on the circumstances (if it is a block element), this would have the advantage of not having additional markup which is always an advantage.