Lets learn Web Designing

Posts tagged “rounded corner

How to make rounded corner images using CSS3

How make rounded corner images using CSS3

Rounded corners in Website design has been a trend for a long time. Almost every project involves some or the other kind of rounded corner boxes. Designers and developers have used different techniques for developing rounded corner boxes. Many of these techniques involve css, javascript, jQuery plugins, and images.

Now looking at the extensive use of the rounded corners in Web Design, W3C has also come up with a new property in CSS3, which will make the rounded corners much easier to use and implement. This property is the “border-radius” property. Almost all the major browsers (except Internet Explorer) have started using this property, with their vendor specific prefixes (-moz-border-radius, and -webkit-border-radius). This property is very easy to use; And using this property will give a rounded corner to almost any element in the html document.

Problem: “border-radius” property doesnot work on images

With the use of “border-radius” property, the rounded corners are easily achievable on div tags, spans, and other html elements. Now, the problem is when you use the border-radius with an img element, the border of the image gets rounded, and the image is drawn above the border, so it is not rounded (look at the example below).

Car

To the image displayed above (img tag), we have given the following styles:

<style type="text/css">
img{
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;
}
</style>

Here we observe one thing that by giving the “border-radius” property to the <img> tag the borders get rounded, but the image does not. The image flows out of the border.

Solution: The tricky part!!!

To solve this above discussed issue, we should do the following steps:

  1. Wrap the <img> element with a div tag which should be having the same dimensions (height and weight) as the <img> tag.
  2. To this wrapping div tag, specify the same original image as the background image.
  3. To the original image <img> tag, give the property “opacity: 0“.

Now, after following the steps as mentioned above, we have the following html markup:

<div>                                             /* DIV TAG STARTS HERE WITH SAME DIMENSIONS AS IMAGE */
    <img src="images/test.jpg" alt="testing" />   /* IMAGE TAG */
</div>                                            /* END DIV TAG */

Now, we are going to give the following styles to the img and div tag.

<style type="text/css">
div{
    width: 550px;                                          /* Width same as the image width */
    height: 350px;                                         /* Height same as image height */ 
    background: url("images/test.jpg") no-repeat 0 0;      /* Background Image same as the Original image being wrapped by the div tag */
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;
}

img{
    opacity: 0;                                            /* Hide the original image being wrapped by the div tag */
}
</style>

The Final Result

After giving the above mentioned markup, and the styles, we will achieve that looks something like this:

Car

The rounded corners shown in the examples above will not appear in Internet explorer. The “border-radius” property is not supported by Internet Explorer as of now.

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.