Rounded (no-image) corners in your design
I am still proceeding (slowly) towards a total overhaul of my present companies intranet, and I wanted something to “soften” the overall design. Rounded corners on things like menu headers, and around images came to mind, but I have always avoided that approach since they have traditionally relied upon creating images for the corners, and the smallest of UI changes always had the cascading effect of changes to those little images.
(All four corners with “smooth” setting)
Well, since the design is an internal one, and we can specify support for the browsers of our choice, I though I would take a look around for some CSS solutions. Yet, in the end it seemed that they still relied on images to do the dirty work, until I found “Nifty Corners”.
(Smooth corners with border)
Nifty Corners is a CSS solution, but it also uses javascript to do the real dirty work. It is supported in major browsers and since you have a javascript function transforming a particular DIV to round its corners, you really do not have to add alot of additional CSS to existing borders.
(Small corners only upper left and lower right)
The single javascript function call takes 5 parameters:
1. A CSS selector that indicates on wich elements apply the function
2. A string that indicates which corners to round (tl, tr, bl, br)
3. Outer color of the rounded corners
4. Inner color of the rounded corners
5. What type of corners (smooth, small, or border)
1. A CSS selector that indicates on wich elements apply the function
2. A string that indicates which corners to round (tl, tr, bl, br)
3. Outer color of the rounded corners
4. Inner color of the rounded corners
5. What type of corners (smooth, small, or border)
It adds a nice touch and does soften up the design. You can get the entire scoop and ALOT more examples over at ProHtml. So soften up your sites and keep them well rounded.