Click here to Skip to main content
Click here to Skip to main content
Go to top

How to Round Corners Compatible with All Browsers (Intenet Explorer, Firefox, Chrome, Opera) easily

, 20 Jul 2011
Rate this:
Please Sign up or sign in to vote.
A very easy code that allows you to round corners
patt.JPG

Introduction

Recently, I downloaded an ASP.NET open source CMS that was very efficient and powerful.

Unfortunately, the provided HTML templates were so bland or strict. I would find an easy solution by adding the least code possible.

Finally, I found the brilliant work of Dave Methvin: the jQuery Corner library (based on Jquery framework library) which enables compatibility with all browsers.

Go to http://jquery.malsup.com/corner/.

I attached this page in PDF format at the root of the demo website.

This library is excellent because it gives you the possibility to put lots of beautiful shapes in the corner.

Background

I thought about how to use this library most easily?

JQuery is a very powerful framework that is able to read any tags and read all its attributes.

So my idea was to create a new attribute: "corner" to add to tags I want to round (divs tag in my examples). The possible values of this attribute are all the possible parameter values of its corner() method : "Bevel", "notch", "bite", "cool", etc.

So I added this attribute in all tags that I wanted:

<div id="div0" class="headermenu" corner="notch">
	Hi , 
	This is a simple test to see the corners with specials shapes.
	Hi , 
	This is a simple test to see the corners with specials shapes
</div>
		

<div id="div1" class="headermenu" corner="bite">
	Hi , 
	This is a simple test to see the corners shapes.<
	i , 
	This is a simple test to see the corners shapes
</div>
		

<div id="div2" class="headermenu" corner="10px">
	Hi , 
	This is a simple test to see the corners rounded.<br />
	i , 
	This is a simple test to see the corners rounded
</div>

Now I needed to program a simple function which gets only all the div tags of the HTML document with the "corner" attribute in order to apply the jquery corner() method.

So I created the file jquery.corner.executor.js to include:

//do this task when the DOM is loaded
$(document).ready(function() {

    // Watch all div in document (you can do the same for table tags)
    $('div').each(function(index) {
        
		//Is there a corner attribute in the current div tag ?
		var attr = $(this).attr('corner');

        //if current div has attribute corner , get the value
        if (typeof attr !== 'undefined' && attr !== false) 
		{
            //get current div id
            var cur_id = $(this).attr('id');

            //get the value : style to apply
            var cur_value = $(this).attr('corner');

            //set property value
            $('#' + cur_id).corner(cur_value);
        }
    });
});

Using the Code

We saw that it is very easy to use this plugin.

To summarise:

  1. Include this JavaScript in the header in good order:
    <!--<span class="code-comment"> The older versions of jquery works too --></span>	
    <script type="text/javascript" src="js/jquery-1.4.min.js" />  
    <script type="text/javascript" src="js/jquery.corner.js" />   
    <script type="text/javascript" src="js/jquery.corner.executor.js" />
  2. Add the attribute corner="good_style" to your div.
  3. Thank Dave Methvin for his great job Wink | ;)

Points of Interest

It's always very interesting to do all the possibilities with jquery and all the great open source libraries built around it. It enables complex things to be done in an easy manner.

History

  • 19th July, 2011: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

David Zenou
Software Developer Several
France France
I am a Fan of dotnet technologies. I began to work with Java j2ee technologies and today i made my choice : .Net Framework is very pleasant , has excellents article codes and documentation.
I found very useful articles in codeproject , and today i want to give my contribution , and i hope that my articles will be useful.
 
Go to see my blog : http://davidzenou.blogspot.com/2009/01/david.html

Comments and Discussions

 
QuestionNice additions Pinmemberjimibt27-Jul-11 0:30 
AnswerRe: Nice additions PinmemberDavid Zenou27-Jul-11 0:52 
QuestionWhy not use a css class? PinmemberDaniel Gidman20-Jul-11 7:18 
AnswerRe: Why not use a css class? PinmemberDavid Zenou20-Jul-11 13:38 
GeneralRe: Why not use a css class? PinmemberGary Noter25-Jul-11 11:12 
QuestionRewrote JS Pinmemberthinkdevcode20-Jul-11 3:56 
AnswerRe: Rewrote JS PinmemberDavid Zenou20-Jul-11 13:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 20 Jul 2011
Article Copyright 2011 by David Zenou
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid