Nifty Corners: rounded corners without images

Update

This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here.

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS. Let's start.

Stripe it to get it rounded

The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect. This is the markup to get a rounded div:

<div id="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

And here's it the basic CSS:

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

You can see the final effect on this simple example. A few words on the use of the <b> element. I needed an inline element to obtain the rounded corners, since it could be nested in almost every kind of tag mainting the markup valid. So the choice fell on b because it doesn't have semantical meaning and it's shorter than span, like Eric Meyer said.

The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.

Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.

The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.

Easy, isn't it? But we can do much better.

Looking forward with DOM

In the example we saw how to get rounded corners without images, sparing about 6-8Kb of page weight. But we love webstandards and semantic markup and we'd like to maintain the HTML clean and light.

Nifty Corners with CSS and Javascript

So, the next step was to provide the unnecessary <b> elements with javascript and DOM making some functions to get rounded corners on almost every element on the page without adding a single line of extra HTML or CSS apart from the basic rules we saw. Let's have a look at the example with Nifty Corners. As you can see from the source code, no extra markup is in it. The solution is a combination of CSS and Javascript. The technique is made up of four essential parts:

1. CSS file for the screen
2. CSS file for the print
3. Javascript library to get Nifty Corners
4. the javascript calls to round the elements you want

The first three components just don't need changes, whatever you want to accomplish. They need just to be declared in the head section of any HTML page like this:

<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>

To understand how to implement the fourth part, you need first to understand how the javascript library for Nifty Corners is implemented. Don't worry: you aren't requested to know javascript to use Nifty Corners...

The javascript functions

If you see the code of the example, you'll notice that I left embedded the CSS and part of the javascript to show how the page is build. Let's see the embedded javascript code:

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#nifty","#377CB1","#9BD1FA");
}
</script>

The function NiftyCheck performs a check for DOM support and excludes IE5.x PC for running the script. If the test has passed, the Rounded function is called. It accepts four parameters:

1. A CSS selector that indicates on wich elements apply the function
2. Outer color of the rounded corners
3. Inner color of the rounded corners
4. an optional fourth parameter, that if is setted to "small" would render small Nifty Corners

The real strenght of the function is that is capable of accepting a CSS selector to target the elements to round. The accepted parameters are:

• Tag selector, i.e. "p" or "blockquote" or "h2"
• Id selector, with specified tag of the element: for example "div#content" or "p#news" or "li#home"
• Class selector, with specified tag of the element: for example "div.entry" or "h2.highlight"
• Descendant selector, with some limitation: this has to be composed by an id selector followed by a tag selector. Valid examples are: "div#news div" or "ul#menu li"

About the colors: they should be specified in hex code with # symbol in three or six digits. The outer color could be also set to transparent.

The fourth parameter is optional and must be setted to "small" to get small rounded corners. Let's see an example:

window.onload=function(){
if(!!NiftyCheck())
    return;
Rounded("div#header","transparent","#C3D9FF","small");
}

I' ve provided also two additional functions that you could find very useful: RoundedTop and RoundedBottom that receive the same parameters of the Rounded function and allow to get rounded corners just on the top or on the bottom of page elements, or all four corners but with upper ones that differ in color from the lower.

Now.. let's see some examples.

The examples

Now the fun part.. I did some examples to show the possibilities of Nifty Corners. For each example will be reported on this page just the javascript calls to Rounded, RoundedTop and RoundedBottom functions, but keep in mind that these calls should be included in the following code:

window.onload=function(){
if(!NiftyCheck())
    return;
/* here the calls to add Nifty Corners */
}

Now, let's begin!

Example one: a single div

This is the example we saw in the opening. The javascript call is:

Rounded("div#nifty","#377CB1","#9BD1FA");

Example two: 2 divs

In this example, two divs were rounded. The js calls are:

Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4");

Example three: small corners

In this example the heading has small rounded corners. The code:

Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");

Example four: newsboxes

In this example we'll see how to make 2-colour newsboxes. The code is:

RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF");

Example five: transparent, tabbed menu

This example show the power of the discendant selector and transparency to get a tabbed menu with a single javascript call:

RoundedTop("div#nav li","transparent","#E8F0FF");

Example six: a liquid image gallery

I rounded-framed an unordered list used for an image gallery here. The javascript call is:

Rounded("div#minipics li","#DDD","#FFF");

Example seven: rounding a form

In this example, I rounded a form and its labels with two js calls:

Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small");

Example eight: final example

This is the final example wich uses some of the techniques we saw in the previous ones. In this case, I did not use embedded css or javascript. The head section contains the following lines:

<link rel="stylesheet" type="text/css" href="roundedPage.css">
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript" src="final.js"></script>

The final.js contains all the javascript calls, let's see its content:

window.onload=function(){
if(!NiftyCheck())
    return;
RoundedTop("div#container","#FFF","#e7e7e7");
RoundedBottom("div#container","#FFF","#E9F398");
RoundedTop("ul#nav li","transparent","#E8F0FF");
Rounded("div#box","#C0CDF2","#E4E7F2");
Rounded("div#minipics li","#C0CDF2","#FFF");
RoundedTop("div.gradient","#C0CDF2","#B8B8B8");
RoundedBottom("div.gradient","#C0CDF2","#ECECF2");
}

A good practice is in fact avoiding using embedded javascript or CSS in the head section.
Quite easy, isn't it? If we'd use one of the css techiques based on background images, probably we'd used 18 images, maybe some extra and non-semantic wrapper and a lot of css declaration. Could you imagine the kilobytes that were spared? Probably, about 18-20Kb or so.

Download

You could download the zip file containting the script, the html and the css of the example that were presented here.

Credits

James Webb Young wrote about 40 years ago in his little gem "A technique for producing Ideas":

An idea is nothing more nor less than a new combination of old elements.

So, I think the idea about Nifty Corners wouldn't have been possible without these readings in past or recent times:

• Rounded Corners without images by Joshua Sowin: his solution showed me that it was possible to avoid the use of images and the missing second part of the article pushed me to start thinking about it
• Mountaintop Rounded Corners by Dan Cederholm: the real fuel for the idea was the zoomed image of an aliased rounded corners on his article.
• Doug's 4 Rounded Corners by Douglas Livingstone
• Rounded Corners with CSS and JavaScript by Simon Willison
• sIFR - Scalable Inman Flash Replacement by Mike Davidson

About Html.it

Html.it is the most known and visited webdesign portal in Italy, providing guides, tutorial, forums in every field of webdesign and programming throught its portal and targetted sub-sites. PRO, the sub-section that host this article, is specialized in CSS, javascript, Search Engines, Photoshop and many other topics with more than 500 article published.

About Alessandro Fulciniti

I was born in northern Italy in 1975. I studied webdesign since for two years, and I have been writing for PRO since December 2003. I wrote about 45 articles focused mainly on CSS and javascript, and I'm the author of the guide on CSS layout published on html.it. You can contact me writing me at a.fulciniti[AT].html.it

Some copyright stuff

Nifty Corners are free for personal and commercial use. However, when writing about them on blogs/webdesign portal, please mention the autor and this page in your text. They were published on the 16th of March 2005 both in Italian and in English on pro.html.it. The technique is subject to future improvements: if you've done one, or you have an idea, please let me know by writing to me. The technique is provided as is, and no responsability should be given to the author to bad page renderings or browser crashes. Use Nifty Corners and save your bandwitdh, but be sure to test your pages in as many browsers as you can. Enjoy!