Click here to Skip to main content
11,928,754 members (51,593 online)
Click here to Skip to main content
Add your own
alternative version


28 bookmarked

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

, 20 Jul 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
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:
    <!--<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.


  • 19th July, 2011: Initial version


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


About the Author

David Zenou
Software Developer Several
France France
Fan of .NET Technologies
Go to see my blog :

You may also be interested in...

Comments and Discussions

QuestionNice additions Pin
jimibt27-Jul-11 1:30
memberjimibt27-Jul-11 1:30 
AnswerRe: Nice additions Pin
David Zenou27-Jul-11 1:52
memberDavid Zenou27-Jul-11 1:52 
QuestionWhy not use a css class? Pin
Daniel Gidman20-Jul-11 8:18
memberDaniel Gidman20-Jul-11 8:18 
AnswerRe: Why not use a css class? Pin
David Zenou20-Jul-11 14:38
memberDavid Zenou20-Jul-11 14:38 
GeneralRe: Why not use a css class? Pin
Gary Noter25-Jul-11 12:12
memberGary Noter25-Jul-11 12:12 
QuestionRewrote JS Pin
thinkdevcode20-Jul-11 4:56
memberthinkdevcode20-Jul-11 4:56 
AnswerRe: Rewrote JS Pin
David Zenou20-Jul-11 14:42
memberDavid Zenou20-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.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151126.1 | Last Updated 20 Jul 2011
Article Copyright 2011 by David Zenou
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid