About

This is an example of a simple cross browser CSS+Javascript method of easily adding rounded corners and a drop shadow to an arbitrary number of elements, by adding just a few lines of code to your page. No images, tables, or filters required.

This is accomplished by combining the fine work of:

• Drew Miller (DD_roundies)
• Larry Stevens (jQuery Drop Shadow)

Implementation

Add this to your header:

<script type="text/javascript" src="DD_roundies_0.0.1a.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dropshadow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.content').dropShadow({blur:4, left:5, top:5});
    DD_roundies.addRule('.content',15);
    DD_roundies.addRule('.dropShadow',15);
   });
</script>
		

Add finally:

Create DIVs with a "content" class (or whatever name you prefer to be effected).

Compatibility

• IE6/7
• Firefox
• Safari