ShadedBorder "JavaScript Round Corners with Drop Shadow"

Steffen Rusitschka has released an update to ShadedBorder. You can now use gradients and the library degrades gracefully. Rounding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed. RUZEE.ShadedBorder itself is the successor of RUZEE.Borders, which was the most feature-rich round […]

Steffen Rusitschka has released an update to ShadedBorder. You can now use gradients and the library degrades gracefully.

Rounding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed.

RUZEE.ShadedBorder itself is the successor of RUZEE.Borders, which was the most feature-rich round corners library out there. But it wasn’t quite easy to use, was slow, had some browser compatibility problems, etc.

ShadedBorders removes most of these limitations and comes with the following features:

  • JavaScript-only Photoshop(tm)-like rendering without external images
  • Round corners
  • Drop shadows
  • Glow effects
  • Gradient backgrounds
  • Graceful degradation - will look ok if JavaScript is turned off
  • Borders with different widths
  • Full support for liquid designs
  • Anti-Aliasing
  • On-hover support (except for IE 6.0)
  • Disable some of the corners, e.g. bottom-left
  • Change borders on-the-fly
  • Real transparency - looks perfect on any background
  • Cross-Browser: Firefox, Internet Explorer (>=6.0), Safari, Opera (>=9.0)
  • Non-obstrusive
  • Leight-weight (8.3KB uncompressed)
  • Fast (0.4s for the example on a 2.2GHz machine)
  • No JavaScript library dependencies

Have a look at the full-featured example, the simple example, or just download the whole library as a ZIP archive.

Java, Script, JavaScript, CSS, ShadedBorder, Round Corener, Drop Shadow