MochiKit.Visual - visual effects


// round the corners of all h1 elements
roundClass("h1", null);

// round the top left corner of the element with the id "title"
roundElement("title", {corners: "tl"});


MochiKit.Visual provides visual effects and support functions for visuals.



At this time, MochiKit.Visual provides one visual effect: rounded corners for your HTML elements. These rounded corners are created completely through CSS manipulations and require no external images or style sheets. This implementation was adapted from Rico.

API Reference


roundClass(tagName[, className[, options]]):

Rounds all of the elements that match the tagName and className specifiers, using the options provided. tagName or className can be null to match all tags or classes. For more information about the options, see the roundElement function.

roundElement(element[, options]):

Immediately round the corners of the specified element. The element can be given as either a string with the element ID, or as an element object.

The options mapping has the following defaults:

corners "all"
color "fromElement"
bgColor "fromParent"
blend true
border false
compact false


specifies which corners of the element should be rounded. Choices are:

  • all
  • top
  • bottom
  • tl (top left)
  • bl (bottom left)
  • tr (top right)
  • br (bottom right)
"tl br": top-left and bottom-right corners are rounded
specifies whether the color and background color should be blended together to produce the border color.

See Also

[1]Application Kit Reference - NSColor:
[2]SVG 1.0 color keywords:
[3]W3C CSS3 Color Module:



Copyright 2005 Bob Ippolito <>. This program is dual-licensed free software; you can redistribute it and/or modify it under the terms of the MIT License or the Academic Free License v2.1.

Portions adapted from Rico are available under the terms of the Apache License, Version 2.0.