Home & blog  /  Scripts  /  view post  /

curveMe - cross-browser curvy corners

Overview

This plugin offers cross-browser curvy corners, alleviating the need to employ multiple techniques to achieve this effect across different browsers. It uses PHP GD to draw the actual curves, so make that's enabled on your server (it normally is by default). Using PHP to draw the corners rather than, say, JavaScript (such as with the jQuery curve() plugin) means no need to flood the DOM with little elements that make up each curve.

Example

Here's the code behind this example:

'curveMeDemoEl' style='background: #759537; width: 150px; position: relative; height:150px;' class='curveMe 20,20,20,20-10-#00659d'>

^^ top of page

Usage

Important: In curveMe.js, be sure to update the path to curveMe.php relevant to your server.

The plugin will run on any elements it finds with a particular class format, namely:

class='curveMe tl,tr,bl,br-border-#colour'

tl, tr, bl and br represent the radius for each corner. These do not all have to be equal. The fifth part is optional and represents the border thickness.

See demo above for a working example.

It can also be run on elements inserted post-load by calling the global function curveMe() (these elements must still have the above class structure). The final param is the border colour to use (if omitted, the background colour of the element will be used instead).

^^ top of page

Notes

Google Chrome

Some versions of Google Chrome can't read computed (as opposed to implicitely set) background colours, so ensure the parent element of any element that you run this plugin on has a stipulated background colour. Otherwise, if it's default white, Chrome reads the background as rgba(0, 0, 0).

^^ top of page
post new comment

Comments (4)

utah mortgage, at 23/11/'10 17:49, said: 
dude.... you script does not work in the latest version of IE .... which i thought was the point.
Mitya, at 23/11/'10 18:09, said: 
Well it was built for IE7&8, so at the time it did work in the latest version of IE. The trouble is, these pesky browser vendors have a habit, wouldn't 'ya know, of releasing new versions of browsers. D'oh! I presume you mean IE9. Just as soon as it agrees to install on my machine, I'll have a look at that and post a fix.
Tommy, at 9/06/'11 23:29, said: 
Don't bother ;-) Supported in html5.
Mitya, at 1/02/'12 22:51, said: 
Good point, Tommy. No need for curveMe in IE9, but very useful for IE7/8. Oh and as of today it supports background colour changes on hover.