21 Mar 2005

Nifty Corners

Under CSS, Technical, Web Standards

I thought I would break my drought in posts with this interesting technique that we’ve been looking into at work as a potential headache preventer. Using CSS and a bit of DOM scripting, Alessandro Fulciniti has combined some good ideas to produce a powerful technique to create clean rounded edges (which I like around here) without images and minimal markup mess.

Visit Nifty Corners for the details, and see Nifty Corners in action here.

So I’m going to play around with these ideas, probably have a go with them at work and see how it goes.

Update

Alessandro has updated his technique with the help of several gurus and has posted the results here

Update again

Roger at 456 Berea St has come up with Transparent Custom Borders and Corners. Beautiful!

Archives

2 comments

  1. Mr Speaker
    March 31, 2005
    4:56 pm

    I dont get how it works…. can ya explain for us non-designy folks? Do the curves have to be the same curvy-ness?

  2. hank
    March 31, 2005
    5:06 pm

    In a nutshell, it appears to use some DOM script to write some semantically meaningless code (b tags) at render time, so that the CSS can hook into it and generate curved edges. The curved edges are generated by adding a top and bottom element, and these elements in turn contain four elements (b tags) with increasing or decreasing margins to create the illusion of rounded edges. You just call a JS function onload with the div ID and background colour as parameters and off it goes.

    I don’t think that makes it any clearer but hey, you can always go to the link and read it again.