Experimental simulation of CSS 3 border-radius for div elements
This is for testing purposes only (early beta version). It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.
Restrictions:
lt
rt
div
lb
rb
javascript and canvas or vml support
background images may doesn't fit as expected
fixed height breaks the layout
Limitations:
generally
border-radius must be set as css class e.g. "borderadius16" or "borderadius00181800"
fixed width layout needs the css class "fixedwidthdiv" if the width is not set through style attribute
top and bottom padding should be greater or equal to border-radius of the top and bottom corners
border-style: (groove|ridge|inset|outset) became solid, because the second color is interpreted individual by the render-engines and can't be detected
specific
safari bug: borderTopColor is equal to borderLeftColor
opera: doesn't show the background images of the corners
opera: the borders and padding must be specified in pixels and colors as rgb or hex to work properly
ie6: background-color doesn't appear under dashed and dotted borders because of the hasLayout rule
ie6: 1 pixel gaps appearing under certain circumstances
ie6: quirks mode and "position: fixed" breaks the layout
Version 1.0 beta (30-Aug-2007)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.