Rounded Corner Box With jQuery Layering Technique

Creating rounded corner boxes in CSS can be a pain point in website development. It not just means loads of divs but also increase in page loading time. How to create rounded corner div boxes and at the same time reduce page loading time? The answer is jQuery.

Use jQuery with Background Layers plugin. The plugin makes things easier. It reduces the HTML code you need to write by adding some JavaScript. Result: The code is less cluttered but very effective in reducing loading time.

Below is the jQuery script to be added to the head section of your web page.

In HEAD tag

<script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>
<script type=”text/javascript” src=”js/jquery.background_layers.js”>
</script>

<script type=”text/javascript”>

$(function(){

$(‘.roundBox’).add_layer(“#ffffff”);

$(‘.roundBox’).add_layer(“url(‘images/vertical_line.gif’) left repeat-y”);

$(‘.roundBox’).add_layer(“url(‘images/vertical_line.gif’) right repeat-y”);

$(‘.roundBox’).add_layer(“url(‘images/horizontal_line.gif’) top repeat-x”);

$(‘.roundBox’).add_layer(“url(‘images/horizontal_line.gif’) bottom repeat-x”);

$(‘.roundBox’).add_layer(“url(‘images/top_left.jpg’) top left no-repeat”);

$(‘.roundBox’).add_layer(“url(‘images/top_right.jpg’) top right no-repeat”);

$(‘.roundBox’).add_layer(“url(‘images/bottom_right.jpg’) bottom right no-repeat”);

$(‘.roundBox’).add_layer(“url(‘images/bottom_left.jpg’) bottom left no-repeat”);

});

</script>

Then in the body section of your page paste these divs

In BODY tag

<div class=”roundBox” style=”height: 100px; width: 100px; margin-right:10px; float:left; text-align:center;”> Box 1</div>

<div class=”roundBox” style=”height: 200px; width: 200px; margin-right:10px; float:left; text-align:center; “> Box 2 </div>

<div class=”roundBox” style=”height: 50px; width: 100px;float:left;text-align:center;”>Box 3</div>

Download plugin source

To develop cost-effective, futuristic websites, contact us.