Download round_corner_div1.zip - 6.4 KB

Introduction

This javascript will help you to create div with round corner without using image and .css file. Few lines of javascript codes will create rounded corner for a div on the fly. Just pass the parameters (div id and which corner i.e. LT=LeftTop or RT=RightTop or LB=LeftBottom or RB=RightBottom you want to round) to the javascript function and you will have it. The attached sample file round_corners_div.aspx will show few examples. This javascript was only tested on Microsoft Internet Explorer version 6.0 in VWD 2005 Express Edition environment. This is a free javascript distributed in the hope that it will be useful but without any warranty.

Background

Ok, backgoround for this code is to make your div tag look more fancy with rounded corner. I have been searching web for javascript which can round a div tag corners without using images but could not find something straight forward, short and simple hence I decided to write my own.

Using the code

Copy and past the javascript functions in web page then call it from body tag as shown in the example file round_corners_div.aspx.

The javascript functions are quite simple and flexible. Flexible in the sence that it gives you option to select which corner of a div tag you want to round.

Download and unzip the attached file. The main file which contains javascript and html codes is named 'round_corners_div.aspx'. The other file round_corners_div.gif is screenshot of the output.

Points of Interest

It is quite cool. You do not need to use images or .css file to round the corners of any div element. The few lines of codes will round the corners of a div on the fly.

It only works on IE6.0.

History

Created by: Muhammad Shoaib

Created on: 7 Sept 2007

Round Corners Div