From CSS Discuss
The basic order of techniques on this page: At the top, you find examples with lots of markup, but will always work well accross different browsers. As you go down, the markup gets shorter, but the browser support goes down. The last two techniques degrade in IE to normal corners, but have the best markup. All the examples have been tested to work in Firefox 1.0 (as of 19 Jan 2005).
Absolutely Positioned: Mostly horrible because of the 1px Roundbug in IE...
- dotnull.com IE's 1px bug solved?? But only tested in IE5.5, IE6, IE7, FF2 and O9.24 on Windows.
Deep Nesting: supports borders
- svay.com FR EN
- alistapart.com Part I - uses tags you may or may not already have in your markup
- alistapart.com Part II - suitable for transparent backgrounds
- sovavsiti.cz uses many nested divs.
- sperling.com simple box by tedd.
- salman-w.blogspot.com Part 2 - uses many nested divs and images to create fluid width box, border/artwork must be embedded on the images
Top and bottom group of divs or spans: supports borders
- redmelon.net supports borders and corners
- hardgrok.org generates images using PHP
- francky's LiquidCorners EN/NL css-only, 1 small gif, supports also transparency and home made borders
- salman-w.blogspot.com Part 1 - uses images and divs with negative margins, border/artwork must be embedded on the image
- rounded corners supports borders and corners
- vertexwerks.com simple, semantic XHTML, supports borders and corners
Change the border color with CSS, no image change.
- This technique was inspired by Roger Johansson's Teaser Boxes and Maurice Svay Nested
- ischagast.nl NL (Broken, 2007-01-26)
IMG tags inside a div:
- kalsey.com uses very simple HTML and CSS code. Doesn't require lots of nested Divs. Limited to solid area fill and doesn't do borders.
Only IMG tags: single pixel borders only
- albin.net supports current browsers, but uses hacks extensively
-moz-border-radius: Mozilla only
- clagnut.com shows how to use Mozilla's extensions for rounded corners. (Note that the Mozilla extensions do not conform to the CSS3 border module)
Generated content: beautiful
- virtuelvis.com - Very simple HTML, though requires generated content support. Works in Moz, Opera, Safari 1.1 and degrades gracefully in IE.
Scripted - very clean HTML
- The Boxes Paradise Rounded corners using a simple set of APIs. Works on all modern browsers.
- Nifty Corners Rounded corners without images :: Alessandro Fulciniti, first version (16 Mar. 2005)
- More Nifty Corners :: Alessandro Fulciniti, second version (06 Apr. 2005). Works in IE 5.5 and later, Opera 7.5 and later, Gecko af Firefox 1.0 level, and Safari 1.1.
- Nifty Corners Cube :: Alessandro Fulciniti, final version (27 Apr. 2006)
- Transparent custom corners and borders
- Gradient Corners Gradient backgrounds with rounded corners. Works in IE 5. and later, Firefox 1.5, and Safari 2.0. (Untested in other browsers.)
- RuzeeBorders Anti-aliased corners, drop shadows, different border widths. Works on all modern browsers, even Opera and Konqueror.
Free Online Web Tools
- Gradient Rounded Corner Generator Creates CSS and rounded corners using 1 make-up image technology. Support gradient, border and antialiased.
- CSS2 Round Corner Generator (Beta) Just type in the square color and the background color and click the "Enviar" button to generate your custom round corners.
- Rounded Corner Graphics Generator PHP Script PHP script that dynamically generates rounded corner graphics in GIF format (source code only, no online demo)
- WellRounded DreamWeaver Extension Supports custom foreground and background colors, borders, drop shadows and inner shadows. Creates graphics and insert CSS and XHTML 1.1 valid markup into the current DreamWeaver document. The containers support relative dynamic positioning, size-to-content. Tutorials provided for using the WellRounded containers as columns, nesting, etc.
- FlexiPanels CSS - the easiest way to generate rounded corner css boxes in Dreamweaver