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

(0 comments)

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