Lets learn Web Designing

2 Great jQuery Plugins for making rounded corners

Simplest way to create rounded corners

There are many different ways to create rounded corner boxes on a web page. Web designers employ many different techniques to create rounded corners, most of which make use of background images and CSS. This technique is good but is tedious, time consuming and adds extra markup in your html document with no structural value.

Today I will discuss about 2 great jQuery plugins which will help you in creating rounded corner boxes for your website in less than a minute. Believe me they are the easiest and simplest way to create rounded corner boxes. They are:

  1. jQuery Corner Plugin
  2. DD_roundies

jQuery Corner Plugin

jQuery Corner Plugin is simple and one of my favourite plugin for creating rounded (or other styled) corners on html elements. Lets see how to use this plugin to create rounded corner boxes.

jquery-corner demonstration picture

Click here to see jQuery Corner Plugin demo

Step 1: Make a folder on your desktop, and give it a name. Lets say- “Project“. We will keep all our files inside this folder.

Step 2: To keep the structure organized, make a separate folder "js" inside Project folder. We will store the jQuery files in js folder.

Step 3: Download the latest jQuery file (jquery-1.3.2.js), and the jQuery Corner plugin file (jquery.corner.js). Save both the files in js folder.

Step 4: Now inside the main Project folder, create a blank html file. Name it as “index.html“.

Step 5: Write the following lines of code between <head> and </head> tags of “index.html” to include the js files.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

Step 6: Write the following line of code between the <body> and </body> tag of “index.html“. This will create a div tag with an id of "box" with some text content.

<div id="box">
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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

Step 7: Write the following line of code between the <head> and </head> tag of “index.html“. This will apply the following styles to the div tag with an id of "box".

<style type="text/css">
	#box{
		background: #FF9900;
		border: 2px solid #660033;
		width: 300px;
		margin: 0 auto;
		padding: 15px;
	}
</style>

Here we are assigning the following styles to the box:

  • background color — #ff9900
  • border — 8px
  • width — 300px
  • padding — 15px
  • margin: 0 auto — To make the box appear in the center of the page.

Step 8: Now write the following line of code between <head> and </head> tag which will make the rounded corners appear.

<script type="text/javascript">
	$(document).ready(function(){
		$('#box').corner();
	});
</script>

Now lets review the complete code once again. Your html page should look something like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	#box{
		background: #FF9900;
		border: 2px solid #660033;
		width: 300px;
		margin: 0 auto;
		padding: 15px;
	}
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#box').corner();
	});
</script>

</head>

<body>

    <div id="box">
    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.
    </div>

</body>
</html>

Step 9: That’s it. We are done now. Click here to go to the demo page to see some more examples.

The best part about jQuery Corner Plugin is that it is very light weight. Not only you can create rounded corners, using this plugin, but also you can create bitten corners, dodge corners and many more. Above all, it exempts you from the trouble of creating rounded corners using background images and CSS. For a complete list of options and detailed description, please visit the jQuery Corners Demo homepage.

DD_Roundies

DD_Roundies is just another jQuery plugin which can be used for making the rounded corners. Here you might be thinking why do we need this plugin, when we already have jQuery Corner Plugin which also does the same task.

One problem with jQuery Corner plugin is that you cannot use it with the inline elements (like anchor tags and spans). This problem is resolved by DD_Roundies plugin. DD_Roundies was mainly focussed to be used in Internet explorer browser. DD_roundies uses IE’s proprietary VML drawing language to create small images representing each corner of an element to be rounded. For more information about this plugin click here.

DD Roundies demonstration image

Click here to see DD_Roundies Plugin demo

Lets see how to use this plugin to create rounded corner boxes.

Step 1: Repeat the steps 1 to 7 as described above (in explaination for jQuery Corners Plugin). Just make sure that you copy the following two files in the js folder: (a) jQuery file (jquery-1.3.2.js), and (b) DD_Roundies plugin file (DD_roundies.js). Save both the files in js folder.

By now, the header section between <head> and </head> of your index.html should look something like this:

<style type="text/css">
.roundbox  {
    background-color:#FF0066;
    border:8px solid #FFCCCC;
    color:white;
    font-weight:bold;
    padding:10px;
    width:400px;
}  
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/DD_roundies.js"></script>

And the code between <body> and </body> of your index.html should look something like this:

<div class="roundbox">
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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

Step 2: Now write the following line of code between <head> and </head> tag of index.html which will make the rounded corners appear.

<script type="text/javascript">
	DD_roundies.addRule('.roundbox', '10px', true);
</script>

By the end of this step, your index.html should look something like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.roundbox{
	background-color: #FF0066; 
	color: white; 
	width: 300px; 
	padding:10px;
	border:8px solid #FFCCCC;
	font-weight: bold;
}
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/DD_roundies.js"></script>
<script type="text/javascript">
	DD_roundies.addRule('.roundbox', '10px', true);
</script>
</head>

<body>

<div class="roundbox">
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. 
</div>

</body>
</html>

Step 3: That’s the end of the lesson. Click here to go to the demo page to see some more examples. If you want to know more details about this plugin, feel free to visit the homepage of DD_Roundies.


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s