Rounded Corners

From CSS Discuss

Jump to: navigation, search

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

  • IE's 1px bug solved?? But only tested in IE5.5, IE6, IE7, FF2 and O9.24 on Windows.

Deep Nesting: supports borders

Top and bottom group of divs or spans: supports borders

Sliding doors: better for smaller boxes - this technique was inspired by Douglas Bowmann's ALA article Sliding Doors of CSS.

Change the border color with CSS, no image change.

This technique was inspired by Roger Johansson's Teaser Boxes and Maurice Svay Nested div technique.

IMG tags inside a div:

  • 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

  • supports current browsers, but uses hacks extensively

-moz-border-radius: Mozilla only

  • 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

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

Commercial Tools

  • 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

Clean Markup - No Javascript

  • Spanky Corners No extra DIVs or Javascript required. Doesn't support nesting, or IE5. Requires a minimum HTML structure (DIV, Header, Content). CSS and Images autogenerated by a tool.
Personal tools