curvyCorners

Cameron Cooke Mar 13, 2006

General

JavaScript-generated rounded corners for any DIV element. Corners are anti-aliased, and support borders of any width and color. Displays nicely with square corners, if JavaScript is turned-off. No images or CSS required.

You can place text here.

Notes

Created by: Cameron Cooke
Web Site: http://www.roundedcorners.net
Posted: March 13, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: curvyCorners.js

 /****************************************************************
  *                                                              *
  *  curvyCorners                                                *
  *  ------------                                                *
  *                                                              *
  *  This script generates rounded corners for your divs.        *
  *                                                              *
  *                                                              *
  *  Version 1.00 beta                                           *
  *  Copyright (c) 2006 Cameron Cooke                            *
  *  By: Cameron Cooke and Tim Hutchison.                        *
  *                                                              *
  *  Website: http://www.curvycorners.net                        *
  *  Email:   info@totalinfinity.com                             *
  *                                                              *
  *                                                              *
  *  This library is free software; you can redistribute         *
  *  it and/or modify it under the terms of the GNU              *
  *  Lesser General Public License as published by the           *
  *  Free Software Foundation; either version 2.1 of the         *
  *  License, or (at your option) any later version.             *
  *                                                              *
  *  This library is distributed in the hope that it will        *
  *  be useful, but WITHOUT ANY WARRANTY; without even the       *
  *  implied warranty of MERCHANTABILITY or FITNESS FOR A        *
  *  PARTICULAR PURPOSE. See the GNU Lesser General Public       *
  *  License for more details.                                   *
  *                                                              *
  *  You should have received a copy of the GNU Lesser           *
  *  General Public License along with this library;             *
  *  Inc., 59 Temple Place, Suite 330, Boston,                   *
  *  MA 02111-1307 USA                                           *
  *                                                              *
  ****************************************************************/

// Attach load event
xAttachEventOnLoad("load", cornerInt);

function cornerInt(){
  // Get all DIV elements
  var divElements = document.getElementsByTagName("DIV");
  var divCount = divElements.length;
  var t = 0;
  objsArray = new Array();

  // Loop through all DIVs
  for(var i = 0; i < divCount; i++){
    var currentDiv = divElements[i];
    if(radius = currentDiv.getAttribute("radius")){
      if(!(corners = currentDiv.getAttribute("corners")))
        corners = "TR,TL,BR,BL";
      var newObj = new curvyCorners(currentDiv, radius, corners);
      objsArray[t] = newObj;
      t++;
    }
  }

  //alert(objsArray);
  var arrayLength = objsArray.length;
  for(var x = 0; x < arrayLength; x++){
      objsArray[x].doCorners();
  }
}

// ------------- curvyCorners OBJECT

function curvyCorners(boxObj, radiusInt, cornersCSVStr) {
  // Set objects properties
  this.box      = boxObj;
  this.radius   = (Math.round(parseInt(radiusInt)/2))*2;
  this.corners  = cornersCSVStr.split(","); // Array

  // Setup global variables
  this.masterCorner     = null;
  this.masterCornerType = null;
  this.cornersAvailable = new Array("TR", "TL", "BR", "BL");

  // Get box formatting details and set properties
  this.boxHeight    = parseInt(((this.box.style.height != "")? this.box.style.height.substring(0, this.box.style.height.indexOf("px")) : this.box.scrollHeight));
  this.boxWidth     = parseInt(((this.box.style.width != "")? this.box.style.width.substring(0, this.box.style.width.indexOf("px")) : this.box.scrollWidth));
  this.borderWidth  = parseInt(((this.box.style.borderWidth != "")? this.box.style.borderWidth.slice(0, this.box.style.borderWidth.indexOf("px")) : 0));
  this.boxColour    = ((this.box.style.backgroundColor.substr(0, 3) == "rgb")? rgb2Hex(this.box.style.backgroundColor) : this.box.style.backgroundColor);
  this.borderColour = ((this.box.style.borderColor != "" && this.borderWidth > 0)? ((this.box.style.borderColor.substr(0, 3) == "rgb")? rgb2Hex(this.box.style.borderColor) : this.box.style.borderColor) : this.boxColour);
  this.borderRadius = parseInt(this.radius - this.borderWidth);
  this.borderString = this.borderWidth + "px" + " solid " + this.borderColour;
  this.posStart = (0 - this.radius);
  this.posAdjust = (Math.floor(Math.sqrt(Math.pow((this.radius - this.borderWidth),2)/2)));

  // Make box relative if not already absolute
  if(this.box.style.position != "absolute") this.box.style.position = "relative";

  // Builds the corners
  this.doCorners = function()
  {
    // Loop once for each corner specfied
    for(var i in this.cornersAvailable)
    {
      // Get current corner type from array
      var currentCorner = this.cornersAvailable[i];

      if(inArray(this.corners, currentCorner) === false)
      {
        // No corner is to be rounded so we generated a square to fill the gap
        var newCorner = document.createElement("DIV");

        // Setup corners properties
        newCorner.style.height   = this.radius - this.borderWidth + "px";
        newCorner.style.width    = this.radius - this.borderWidth + "px";
        newCorner.style.position = "absolute";
        newCorner.style.fontSize = "1px";
        newCorner.style.overflow = "hidden";
        newCorner.style.backgroundColor = this.boxColour;

        switch(currentCorner)
        {
          case "TL":
            newCorner.style.borderLeft = this.borderString;
            newCorner.style.borderTop  = this.borderString;
            break;
          case "TR":
            newCorner.style.borderRight = this.borderString;
            newCorner.style.borderTop   = this.borderString;
            break;
          case "BL":
            newCorner.style.borderLeft   = this.borderString;
            newCorner.style.borderBottom = this.borderString;
            break;
          case "BR":
            newCorner.style.borderRight  = this.borderString;
            newCorner.style.borderBottom = this.borderString;
            break;
        }
      }
      else{
        /*
        To increase performace we only ever generate one corner.
        This corner is the bottom right corner. If more that one corner is requested
        then the other corners will be a cloned version of the first corner.
        */
        if(this.masterCorner != null)
        {
          // Create clone of the master corner
          var newCorner = this.masterCorner.cloneNode(true);
        }
        else
        {
          // First time round so generate the master corner
          var newCorner = document.createElement("DIV");

          // Setup corners properties
          newCorner.style.height   = this.radius + "px";
          newCorner.style.width    = this.radius + "px";
          newCorner.style.position = "absolute";
          newCorner.style.fontSize = "1px";
          newCorner.style.overflow = "hidden";

          // Cycle the x-axis
          for(var intx = 0; intx < this.radius; intx++)
          {
            // Calculate the value of y1 which identifies the pixels inside the border
            if((intx +1) >= this.borderRadius)
              var y1 = -1;
            else
              var y1 = (Math.floor(Math.sqrt(Math.pow(this.borderRadius, 2) - Math.pow((intx+1), 2))) - 1);

            // Only calculate y2 and y3 if there is a border defined
            if(this.borderRadius != this.radius)
            {
               if((intx) >= this.borderRadius)
                 var y2 = -1;
               else
                 var y2 = Math.ceil(Math.sqrt(Math.pow(this.borderRadius,2) - Math.pow(intx, 2)));
               if((intx+1) >= this.radius)
                 var y3 = -1;
               else
                 var y3 = (Math.floor(Math.sqrt(Math.pow(this.radius,2) - Math.pow((intx+1), 2))) - 1);
            }

            // Calculate y4
            if((intx) >= this.radius)
              var y4 = -1;
            else
              var y4 = Math.ceil(Math.sqrt(Math.pow(this.radius,2) - Math.pow(intx, 2)));

            // Draw bar on inside of the border with foreground colour
            if(y1 > -1) this.drawPixel(intx, 0, this.boxColour, 100, (y1+1), newCorner);

            // Only draw border/foreground antialiased pixels and border if there is a border defined
            if(this.borderRadius != this.radius)
            {
                // Cycle the y-axis
                for(var inty = (y1 + 1); inty < y2; inty++)
                {
                  // For each of the pixels that need anti aliasing between the foreground and border colour draw single pixel divs
                  var pixelcolour = BlendColour(this.boxColour, this.borderColour, pixelFraction(intx, inty, this.borderRadius));
                  this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner);
                }

                // Draw bar for the border
                if(y3 >= y2)
                {
                  if (y1 == -1)
                    y1 = 0;
                  this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner);
                }

                // Set the colour for the outside curve
                var outsideColour = this.borderColour;
              }
              else
              {
                // Set the coour for the outside curve
                var outsideColour = this.boxColour;
                var y3 = y1;
              }

              // Cycle the y-axis and draw the anti aliased pixels on the outside of the curve
              for(var inty = (y3 + 1); inty < y4; inty++)
              {
                // For each of the pixels that need anti aliasing between the foreground/border colour & background draw single pixel divs
                this.drawPixel(intx, inty, outsideColour, (pixelFraction(intx, inty ,this.radius) * 100), 1, newCorner);
              }
            }
            // Store corner as master corner
            this.masterCorner = newCorner.cloneNode(true);
            this.masterCornerType = "BR";
        }
      }

      /*
      Now we have a new corner we need to reposition all the pixels unless
      the current corner is the bottom right/
      */
      if(currentCorner != "BR")
      {
        // Loop through all children (pixel bars)
        var pixelCount = newCorner.childNodes.length;
        for(var t = 0; t < pixelCount; t++)
        {
          // Get current pixel bar
          var pixelBar = newCorner.childNodes[t];

          // Get current top and left properties
          var pixelBarTop    = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px")));
          var pixelBarLeft   = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px")));
          var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px")));

          // Reposition pixels
          if(currentCorner == "TL" || currentCorner == "BL"){
              pixelBar.style.left = this.radius -pixelBarLeft -1 + "px"; // Left
          }
          if(currentCorner == "TR" || currentCorner == "TL"){
              pixelBar.style.top =  this.radius -pixelBarHeight -pixelBarTop + "px"; // Top
          }
        }
      }

      // Position the container
      switch(currentCorner)
      {
        case "TL":
          newCorner.style.top  = (this.posStart + this.posAdjust) + "px";
          newCorner.style.left = (this.posStart + this.posAdjust) + "px";
          break;

        case "TR":
          newCorner.style.top  = (this.posStart + this.posAdjust) + "px";
          newCorner.style.left = (this.boxWidth - this.posAdjust) + "px";
          break;

        case "BL":
          newCorner.style.top = (this.boxHeight - this.posAdjust) + "px";
          newCorner.style.left = (this.posStart + this.posAdjust) + "px";
          break;

        case "BR":
          newCorner.style.top = (this.boxHeight - this.posAdjust)+ "px";
          newCorner.style.left = (this.boxWidth - this.posAdjust)+ "px";
          break;
      }

      // Append new corner
      this.box.appendChild(newCorner);

      /*
      We have now drawn all the corner required so we now need to
      put on the finishing touches.
      */

      // Draw bars ----------------------------------------------

      // Turn off current borders
      this.box.style.borderWidth = "0px";

      for(var s = 0; s < 4; s++)
      {
        // Create bar
        var bar = document.createElement("DIV");

        // Set the bars properties
        bar.style.height   = this.boxHeight + "px";
        bar.style.width    = this.boxWidth + "px";
        bar.style.position = "absolute";
        bar.style.fontSize = "1px";
        bar.style.overflow = "hidden";
        bar.style.backgroundColor = this.boxColour;
        //bar.style.backgroundColor = "#663322";

        switch(s)
        {
            // Left
            case 0:
              bar.style.top = this.posAdjust + "px";
              bar.style.left = (this.posStart + this.posAdjust) + "px";
              bar.style.width = (this.radius - this.posAdjust - this.borderWidth) + "px";
              bar.style.height = (this.boxHeight - (2 * this.posAdjust)) + "px";
              bar.style.borderLeft = this.borderString;
              break;
            // Right
            case 1:
              bar.style.top = this.posAdjust + "px";
              bar.style.right = (this.posStart + this.posAdjust) + "px";
              bar.style.width = (this.radius - this.posAdjust - this.borderWidth) + "px";
              bar.style.height = (this.boxHeight - (2 * this.posAdjust)) + "px";
              bar.style.borderRight = this.borderString;
              break;
            // Top
            case 2:
              bar.style.top = (this.posStart + this.posAdjust) + "px";
              bar.style.left = this.posAdjust + "px";
              bar.style.height = (this.radius - this.posAdjust - this.borderWidth) + "px";
              bar.style.width = (this.boxWidth - (2 * this.posAdjust)) + "px";
              bar.style.borderTop = this.borderString;
              break;
            // Bottom
            case 3:
              bar.style.bottom = (this.posStart + this.posAdjust) + "px";
              bar.style.left = this.posAdjust + "px";
              bar.style.height = (this.radius - this.posAdjust - this.borderWidth) + "px";
              bar.style.width = (this.boxWidth - (2 * this.posAdjust)) + "px";
              bar.style.borderBottom = this.borderString;
              break;
        }
        // Append bar
          this.box.appendChild(bar);
      }
    }
  }

  this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner) {
    // Create pixel
    var pixel = document.createElement("DIV");
    pixel.style.height   = height + "px";
    pixel.style.width    = "1px";
    pixel.style.position = "absolute";
    pixel.style.fontSize = "1px";
    pixel.style.overflow = "hidden";
    pixel.style.backgroundColor = colour;

    // Set opacity if the transparency is anything other than 100
    if (transAmount != 100)
      setOpacity(pixel, transAmount);

    // Set the pixels position
    pixel.style.top = inty + "px";
    pixel.style.left = intx + "px";
    newCorner.appendChild(pixel);
  }
}

// ------------- UTILITY FUNCTIONS

/*
Blends the two colours by the fraction
returns the resulting colour as a string in the format "#FFFFFF"
*/
function BlendColour(Col1, Col2, Col1Fraction) {
  var red1 = parseInt(Col1.substr(1,2),16);
  var green1 = parseInt(Col1.substr(3,2),16);
  var blue1 = parseInt(Col1.substr(5,2),16);
  var red2 = parseInt(Col2.substr(1,2),16);
  var green2 = parseInt(Col2.substr(3,2),16);
  var blue2 = parseInt(Col2.substr(5,2),16);

  if(Col1Fraction > 1 || Col1Fraction < 0) Col1Fraction = 1;

  var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction)));
  if(endRed > 255) endRed = 255;
  if(endRed < 0) endRed = 0;

  var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction)));
  if(endGreen > 255) endGreen = 255;
  if(endGreen < 0) endGreen = 0;

  var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction)));
  if(endBlue > 255) endBlue = 255;
  if(endBlue < 0) endBlue = 0;

  return "#" + IntToHex(endRed)+ IntToHex(endGreen)+ IntToHex(endBlue);
}

/*
Converts a number to hexadecimal format
*/
function IntToHex(strNum) {
  base = strNum / 16;
  rem = strNum % 16;
  base = base - (rem / 16);
  baseS = MakeHex(base);
  remS = MakeHex(rem);
  return baseS + '' + remS;
}


/*
gets the hex bits of a number
*/
function MakeHex(x) {
  if((x >= 0) && (x <= 9))
  {
    return x;
  }
  else
  {
    switch(x)
    {
      case 10: return "A";
      case 11: return "B";
      case 12: return "C";
      case 13: return "D";
      case 14: return "E";
      case 15: return "F";
    }
  }
}


/*
For a pixel cut by the line determines the fraction of the pixel on the 'inside' of the
line.  Returns a number between 0 and 1
*/
function pixelFraction(x, y, r) {
  var pixelfraction = 0;

  /*
  determine the co-ordinates of the two points on the perimeter of the pixel that the
  circle crosses
  */
  var xvalues = new Array(1);
  var yvalues = new Array(1);
  var point = 0;
  var whatsides = "";

  // x + 0 = Left
  var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x,2)));

  if ((intersect >= y) && (intersect < (y+1))) {
    whatsides = "Left";
    xvalues[point] = 0;
    yvalues[point] = intersect - y;
    point =  point + 1;
  }
  // y + 1 = Top
  var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y+1,2)));

  if ((intersect >= x) && (intersect < (x+1))) {
    whatsides = whatsides + "Top";
    xvalues[point] = intersect - x;
    yvalues[point] = 1;
    point = point + 1;
  }
  // x + 1 = Right
  var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x+1,2)));

  if ((intersect >= y) && (intersect < (y+1))) {
    whatsides = whatsides + "Right";
    xvalues[point] = 1;
    yvalues[point] = intersect - y;
    point =  point + 1;
  }
  // y + 0 = Bottom
  var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y,2)));

  if ((intersect >= x) && (intersect < (x+1))) {
    whatsides = whatsides + "Bottom";
    xvalues[point] = intersect - x;
    yvalues[point] = 0;
  }

  /*
  depending on which sides of the perimeter of the pixel the circle crosses calculate the
  fraction of the pixel inside the circle
  */
  switch (whatsides) {
    case "LeftRight":
    pixelfraction = Math.min(yvalues[0],yvalues[1]) + ((Math.max(yvalues[0],yvalues[1]) - Math.min(yvalues[0],yvalues[1]))/2);
    break;
    case "TopRight":
    pixelfraction = 1-(((1-xvalues[0])*(1-yvalues[1]))/2);
    break;
    case "TopBottom":
    pixelfraction = Math.min(xvalues[0],xvalues[1]) + ((Math.max(xvalues[0],xvalues[1]) - Math.min(xvalues[0],xvalues[1]))/2);
    break;
    case "LeftBottom":
    pixelfraction = (yvalues[0]*xvalues[1])/2;
    break;
    default:
    pixelfraction = 1;
  }

  return pixelfraction;
}

// This function converts CSS rgb(x, x, x) to hexadecimal
function rgb2Hex(rgbColour) {
  try{
    // Remove rgb()
    var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));

    // Split RGB into array
    var rgbArray = rgbValues.split(", ");

    // Get RGB values
    var red   = parseInt(rgbArray[0]);
    var green = parseInt(rgbArray[1]);
    var blue  = parseInt(rgbArray[2]);

    // Build hex colour code
    var hexColour = "#" + IntToHex(red) + IntToHex(green) + IntToHex(blue);
  }
  catch(e){
    alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");
  }

  return hexColour;
}

// Function by Simon Willison from sitepoint.com
function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;

  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";

  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}

/*
Returns index if the passed value is found in the
array otherwise returns false.
*/
function inArray(array, value) {
  for(var i = 0; i < array.length; i++){

    // Matches identical (===), not just similar (==).
    if (array[i] === value) return i;
  }
  return false;
}

/*
Returns true if the passed value is found as a key
in the array otherwise returns false.
*/
function inArrayKey(array, value) {
  for(key in array){
    // Matches identical (===), not just similar (==).
    if(key === value) return true;
  }
  return false;
}

// Attaches onload event cross browser
function xAttachEventOnLoad(event, func) {
 // Attach event
  if(window.addEventListener)
    window.addEventListener(event, func, false);
  else if(window.attachEvent)
    window.attachEvent("on" + event, func);
  else
    window.onload = func;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="curvyCorners.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div radius="20" id="curve" style="background-color: #9BD1FA; border: 3px solid #00009C; width: 250px; height: 100px;"> <br>You can place text here.</div>

Leave a Response

(2 comments)

Good script but I (personally) don't like how when the html page is rendered it shows the rectangle borders for a few microseconds, then curves them.[br /][br /]Do this to stop the square corners from showing:[br /][br /]Replace </BODY> with:[br /][br /]<script language="Javascript">[br /]cornerInt();[br /]</script>[br /]</BODY>[br /][br /]and comment out [using //] the line of code in the js file:[br /]xAttachEventOnLoad("load", cornerInt);[br /][br /]I found this then loads the page and curves the corners without showing the square corners for a few microseconds - much improved and much more professional looking.

Dave Holland Nov 19, 2008

Hi This code was really helpful. Thank you very much.[br /][br /]Chhers

Vivek Bhat Sep 23, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details