Click here to Skip to main content
15,792,870 members
Articles / Programming Languages / Javascript

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

Rate me:
Please Sign up or sign in to vote.
4.73/5 (9 votes)
20 Jul 2011CPOL2 min read 31.1K   808   28   7
A very easy code that allows you to round corners


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

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.


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 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 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

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:
    <!-- The older versions of jquery works too -->	
    <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 ;)

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.


  • 19th July, 2011: Initial version


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

Written By
Software Developer Several
France France
Fan of .NET Technologies
Go to see my blog :

Comments and Discussions

QuestionNice additions Pin
jimibt27-Jul-11 1:30
jimibt27-Jul-11 1:30 
AnswerRe: Nice additions Pin
Dav Zen27-Jul-11 1:52
Dav Zen27-Jul-11 1:52 
QuestionWhy not use a css class? Pin
Daniel Gidman20-Jul-11 8:18
professionalDaniel Gidman20-Jul-11 8:18 
AnswerRe: Why not use a css class? Pin
Dav Zen20-Jul-11 14:38
Dav Zen20-Jul-11 14:38 
GeneralRe: Why not use a css class? Pin
MacSpudster25-Jul-11 12:12
professionalMacSpudster25-Jul-11 12:12 
QuestionRewrote JS Pin
thinkdevcode20-Jul-11 4:56
thinkdevcode20-Jul-11 4:56 
AnswerRe: Rewrote JS Pin
Dav Zen20-Jul-11 14:42
Dav Zen20-Jul-11 14:42 

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

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