Dijit: Rounded Tabs

Everybody likes rounded buttons, rounded page elements and last but not least, rounded tabs. Fortunately dijit comes with great theming possibilities, so I will show you how you can make your own fancy rounded tabs using a simple image sprite and a couple of CSS classes. Nikolai Onken: Now we have to consider a couple […]

Everybody likes rounded buttons, rounded page elements and last but not least, rounded tabs. Fortunately dijit comes with great theming possibilities, so I will show you how you can make your own fancy rounded tabs using a simple image sprite and a couple of CSS classes.

Nikolai Onken: Now we have to consider a couple of things before we get started. These are issues you might not think of in the first place, but down the line it is important to keep them in mind.

  1. Our tabs need to be width independent. We don't know how long the containing text will be
  2. Our tabs need to be height independent. Always keep user accessibility in mind. Some people don't see as well as you do and they will want to look at your site in a different scale.

Following these two points will create a few visual drawbacks which we'll see later in this tutorial. Of course you could say "Ohh, I don't care about these things"—especially point #2—but keep in mind that you might lose a certain kind of audience.

Enough talking, let’s get started and make a fancy tab design in your favorite imaging software, and don't forget the rounded corners!

The graphics

Looking at the above Design we can agree on the fact that the left and right corners should be separate images. We can make a centered image and repeat it on the x-axis to fill potentially large widths.

Full Article

Dojo, CSS, Rounded Corner, Article, Gudie, Walkthrough