Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.

curvyCorners was a JavaScript library that added rounded corners to HTML div elements without requiring pre-made corner images. It was designed for the era before CSS border-radius was broadly available. Its historical feature lists advertised anti-aliasing, borders, optional corners, custom radii, background-image support and flexible element dimensions. For new sites, native CSS is the practical replacement; curvyCorners is now mainly of interest to developers maintaining old pages or studying early web techniques.

What curvyCorners was

curvyCorners ran in the browser and attempted to create smooth rounded edges around ordinary HTML block elements. The goal was to avoid the four-corner graphics and extra layout work commonly used to round boxes before browsers offered dependable CSS support. A January 2008 description calls it imageless and highlights anti-aliasing and configurable corners (SmashingApps’ curvyCorners listing).

It was a compatibility workaround, not a CSS framework or image editor. A historical directory identifies camsoft as the publisher or developer and lists the license as LGPL; check the license file in any particular copy before reuse (HotScripts listing).

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What “imageless” and “anti-aliased” meant

“Imageless” referred to the corner treatment: the effect did not require separate, pre-rendered bitmap files for the corners. It did not mean that the page could contain no images. Historical descriptions also advertised background-image support and smoothing over graphical backgrounds.

Anti-aliasing is the smoothing of the pixel transition along a curved edge, which can otherwise look jagged against a contrasting background. The library’s descriptions promoted its corners as fully anti-aliased, but that is a historical product claim, not a modern comparative test. Results depended on the browser’s rendering and on how the generated effect interacted with borders, backgrounds and page layout.

Features described in historical listings

Old feature descriptions and directories advertised the following capabilities. These are historical claims, not a guarantee that a surviving copy works in current browsers.

  • Optional corners: round selected corners while leaving others square.
  • Custom radii: set corner curvature, including different values for individual corners.
  • Borders: specify border color and width around the rounded element.
  • Backgrounds: work with background images and graphical backgrounds, according to the feature descriptions.
  • Flexible dimensions: support fluid width and height rather than only fixed-size boxes.
  • Multiple elements: apply the effect to more than one element on a page.
  • Historical browser claims: a directory names Internet Explorer, Firefox and Safari. This does not establish support for present-day versions or document modes.

How the old technique worked

At a high level, a page loaded the script, selected elements to modify, and supplied corner and radius settings. The library then calculated the edge geometry and generated or styled additional page content to approximate a smooth curve. The exact internal implementation and API can vary by release; generated markup is also one reason these libraries could complicate later styling and layout code.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A third-party archived example shows settings in this general form:

var settings = {
  tl: { radius: 12 },
  tr: { radius: 12 },
  bl: { radius: 12 },
  br: { radius: 12 },
  antiAlias: true
};

In that example, tl, tr, bl and br refer to the top-left, top-right, bottom-left and bottom-right corners. radius sets the corner radius, and antiAlias requests smoothing. An archived example using these option names is available at W3Cschool. Treat it as illustrative, not as a canonical API reference: a matching library file and its required initialization method are necessary for the code to run.

Historical setup and what to check first

A 2012 Stack Overflow discussion refers to a script named curvy.corners.trunk.js and an old demo. That filename is evidence of a historical example, not a verified current download or a filename shared by every release (Stack Overflow discussion).

Before touching an old installation, locate the exact script and initialization code already used by the site. Do not assume an old mirror is official or trustworthy, and do not add an unverified copy to a production page. Check the archive’s own license text and test in the exact browser and document mode the application must support. The current official repository, maintainer, release, supported-browser matrix and download could not be verified from the historical listings.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Why it is difficult to recommend today

Old feature lists are not current compatibility documentation. There is no verified basis to promise that curvyCorners works in modern browsers, that it is maintained, or that an available copy is safe. A JavaScript approximation may also leave extra elements in the DOM, which can affect selectors, measurements and debugging. If it calculates dimensions only at initialization, resizing, showing a previously hidden element, changing fonts or inserting content later may require reinitialization; automatic recalculation should not be assumed without documentation for the specific copy.

Visual trouble can arise when the corner’s background color does not match the element behind it, when a background image is positioned or repeated unexpectedly, or when a border and radius meet at a high-contrast edge. Many processed elements or repeated recalculation also create general performance and maintenance risks for DOM-generating scripts; no curvyCorners-specific benchmark is established.

If the script loads but nothing changes

  • Check that the script path points to an existing, complete file.
  • Confirm that initialization runs after the target elements exist and that its selector matches them.
  • Check whether that release expects a particular browser or DOM behavior.

If corners look jagged, discolored or misaligned

  • Compare the element’s background with the surface behind it, especially around transparent edges.
  • Check background-image positioning and repeat behavior.
  • Test small radii, thin and thick borders, and contrasting backgrounds in the required browser.
  • Make sure the radius is sensible for the element’s actual dimensions.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Replace curvyCorners with CSS

For current web development, CSS provides rounded corners, borders and backgrounds without a JavaScript dependency:

.card {
  border-radius: 16px;
  border: 1px solid #d0d5dd;
  background: #fff;
}

Set different corners individually when the design calls for them:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
.card {
  border-top-left-radius: 16px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 0;
}

To clip an image or other child content to a rounded container, add overflow: hidden to the container:

.card {
  border-radius: 16px;
  overflow: hidden;
}

.card img {
  display: block;
  width: 100%;
}

Migration checklist for an existing page

  1. Find every element and initialization call that curvyCorners modifies.
  2. Record each element’s radius, border, background and enabled corners.
  3. Create CSS classes using border-radius or the four individual corner properties.
  4. Add overflow: hidden only where child images or content need clipping.
  5. Check whether page scripts or selectors depend on markup generated by curvyCorners.
  6. Test borders, backgrounds, resizing, responsive layouts and printing after applying CSS.
  7. Remove the old script only after confirming that no remaining page behavior relies on it.

When keeping it may make sense

Retaining an existing copy may be defensible for a frozen kiosk or intranet that must run in an obsolete browser, or when reproducing a historical page. Even then, keep the decision tied to a concrete legacy requirement and review the exact code and license. For a new site, a responsive application, a page with many changing elements, or a security-sensitive project, native CSS avoids an unnecessary unmaintained JavaScript dependency.

Do not confuse it with similarly named projects

SourceForge has a separate project named “Curved Corners,” registered in 2010. It should not be treated as the curvyCorners library or as its official repository (SourceForge project page).

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.