JavaScript code for simple implementation of DIV rounded corners _ Javascript tutorial

JAVASCRIPT: JavaScript code for DIV rounded corners. Javascript tutorial

This program is an open source javascript code implementation used to create DIV rounded corners. The effect is the same as that of image rounded corners. it is simple and easy to use. Different radius rounded corners can be achieved without modifying any image ....
With this code, you can customize your own DIV, which is no longer a square, and can fully implement a circular and personalized DIV.

Usage instructions:

The following example uses a DIV with a 20-pixel rounded corner.

------------------------------
Decompress the downloaded file and upload it to your site. Copy the following code and paste it into the top part of your web page. If you save the file to a directory outside the web page

Modify the src value in the code anywhere.
=== Code:
<Script type = "text/javascript" src = "rounded_corners.js"> 

------------------------------ B
Then create a DIV. If you already have a DIV that uses rounded corners, you only need to give this DIV an id.
=== Code:
<DIV id = "myDiv">

------------------------------ C
Finally, we need to add a piece of javascript to pre-load. Add the following code in the top part of your webpage:

The following is a reference clip: Window. onload = function () { Settings = { Tl: {radius: 20 }, Tr: {radius: 20 }, Bl: {radius: 20 }, Br: {radius: 20 }, AntiAlias: true, AutoPad: false } Var divObj = document. getElementById ("myDiv "); Var cornersObj = new curvyCorners (settings, divObj ); CornersObj. applyCornersToAll (); } Script

Radius indicates the radius. The larger the value, the larger the rounded corner.
------------------------------------ D
Now you can run it.

----------------------------------- PS:
* ******* If you want to create an odd rounded corner, you can set different radius for each corner.
For example:

The following is a reference clip: Settings = { Tl: {radius: 20 }, Tr: {radius: 40 }, Bl: {radius: 60 }, Br: {radius: 80 }, AntiAlias: true, AutoPad: false } Or: Settings = { Tl: {radius: 20 }, Tr: false, Bl: false, Br: {radius: 80 }, AntiAlias: true, AutoPad: false }

Tip: tl-upper left corner tr = upper right corner bl = lower left corner br = lower right corner