Friday, November 11th, 2005

DomCorners: Give me rounded corners

Category: UI

DomCorners is a clean technique for getting rounded corners.

You get to put in a few JavaScript snippets like:

<script type="text/javascript" src="domCorners.js"></script>
<script type="text/javascript">

and you end up with:


It’s amazing the lengths we go to get small things like roundness isn’t it? :)

Posted by Dion Almaer at 9:55 am

3.2 rating from 10 votes


Comments feed

Nifty Corners has been around for a while and is great as well.

Comment by chuck — November 11, 2005

whoops, just read more of the site and its by the same guy that did nifty corners.

Comment by chuck — November 11, 2005

bottom corners are fucked up, yo.

Comment by hustla — November 11, 2005

It’s a cool way to get round corners. The only ‘but’ that I see is when the page is loaded/reloaded. There’s a flicker effect. You see squared corners and after an instant they get rounded. If there were some way to avoid that this would be in my opinion the cleanest way to round corners.

Comment by xorx — November 12, 2005

“If there were some way to avoid that this would be in my opinion the cleanest way to round corners”

Clean using javascript? NO-WAY

Javascript should only be in charge of user interaction, of ‘actions’ and not appeareance. Structure and only structure defined using (x)HTML, the appearence defined with CSS, and behavioural aspects managed with javascript, keeping in mind the possibility of not having javascript available on the client browser. And each of that defined on their own files, and not messed up all around in the same file. That is clean.

That said, rounded corners for flexible block layouts are still the holy grail in web design. Solutions like that are welcome, but IMHO they’re just hacks that are fine until we can do that with CSS alone. In no way they’re clean solutions.

Comment by Gorka — November 12, 2005

I have an idea! Skip the javascript and just use the image. Seriously, why all the effort? I’ve been using rounded corners on flexible layouts for ages and never needed any javascript to do it. Seems like this is making a mountain out of a molehill.

Comment by Boseephus — November 12, 2005

How about this one – the source is about as clean as it can possibly get:

obviously much better in Firefox, as I haven’t spent much time making it work perfectly in IE yet.

Comment by Kae Verens — November 14, 2005

“Clean using javascript? NO-WAY”

I agree mostly with what Gorka states. But I’d like to remark that the approach perhaps doesn’t follow best practices or recommended design guidelines, but for me it is clean in the sense that you get the results with much less code, which is good, and clean.

BTW: does anyone know if there is some initiative ongoing to include the omnipresent rounded corners natively in divs or other components? It’s a capability that would reduce zillions of lines of code all over the web.

Comment by xorx — November 14, 2005

I like the goal of clean simplicity, but in what way does this improve on what Rico offers for rounding?

Comment by muncman — November 19, 2005

I like the smart javascript in the DomCorners-method. But if possible, I try to avoid javascript in favour of css. And in case of flexible rounded corners, it is possible.
For those looking for a 1 (small) image pure css liquid corner solution (no javascript), see: Liquid Corners Playgarden. And if still interested, the background article/tutorial/homekit can be found on: Liquid Round Corners.
Valid html, valid css; even Internet Explorer does display it correctly. ;-)
Yes, it is asking some extra css-lines, and a couple of extra div’s in html. – No, it is not more than the extra js-lines with the DomCorners method.
Liquid borders:
Advantage of the Liquid Corners method: home made borders (borderlines as well as images) can be easy applicated in the same way (the combined image can stay light-weight).
The CSS3 Backgrounds and Borders Module (Working Draft) has the new property ‘border-radius‘.
But (a) before CSS3 has become an official w3c-recommendation, and (b) before all browsers have implemented it in the good way, I guess there will be gone some Happy New Years…

Comment by francky — March 5, 2006

Leave a comment

You must be logged in to post a comment.