Transcorners (4 kb)

Assemble! You all know nifty corners, huh? Meet Transcorners - the guys who will round your corners on mootools.

Brought to you by Inviz

Daddy, why transcorners?

  1. No images
  2. Any radius
  3. Transitions support

But... they dont yet support:

  1. image-backgrounds (sorta)
  2. borders with width more then 1px

How does it assemble?

Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn.

But there are some differences between Nifty and Transcorners:


They're just in development stage. Most modern browsers handle Transcorners ideal. Still need help on IE7 RC (some unknown warning) and Opera 8 (needs a test). Leave info in the post comments please.

Browser Result
Firefox 1.5, Firefox 2 OK
Camino OK
Internet Explorer 6 OK
Konqueror OK
Opera 9 OK
Safari OK
Internet Explorer 7 RC3 OK (with warning)
Opera 8 Untested

How to assemble?

East as pie!

//old style new Transcorner(ELEMENT, SIDE, OPTIONS); //new style ELEMENT.makeRounded(SIDE, OPTIONS);

What are these?

  1. ELEMENT: Usual variable with element.
    Like $('content') or $('myblock')
  2. SIDE: A string that declares the side which should be rounded:
    • 'top' both top corners
    • 'bottom' both bottom corners
    • 'top left' just top left
    • 'bottom right' just bottom right
    • 'bottom right, top'both top corners and bottom right
    • false all 4
    So we can set sides as a comma separated string. We can not have different corners on the same side: 10 pixel bottom left and 20px bottom right — that's impossible.
  3. OPTIONS: An object with values. Usual for moo scripts:
    • radius: 10 the amount of pixels should be rounded. This value is rough so play with it
    • borderColor: red the color of of 1px border around corners.
    • backgroundColor: #fff the color inside of the rounded part.
    • transition: fx.linear the transition function. Look into the mootools js file for more
    • onComplete: func the function that will be called on complete of rounding

Show me working examples!

//old style new Transcorner( $('content'), //element 'top right', //side { radius: 10, transition: fx.linear }//options );
//new style $('content').makeRounded('bottom left', {radius: 100});
//round all corners with 30
$('example1').makeRounded({radius: 30});
we also have background:transparent; and border:1px solid #fff; in CSS on this.
//round all corners with 10
//round top left corner with grey border and 20 pixel radius
$('example3').makeRounded('top left', {borderColor: '#777', radius: 20});
//round all top corners with 10
//round all top and bottom right cornerslinear transition
$('example5').makeRounded('top, bottom right', {transition: fx.linear});