CSS & Round Corners: Making Accessible Menu Tabs

By Trenton Moss
2004-06-27

The final touch

Let's assign this link a nice hover effect. We'll need a couple more background images, like

and

which we'll call "right-tab-hover.gif" and "right-tab-hover.gif". Then, we just insert the following CSS code and away we go!

a:hover
{
color: #000;
background: #fb0 url("left-tab-hover.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
a:hover span
{
background: url("right-tab-hover.gif") right top no-repeat;
padding-right: 10px
}

In a real example you will be able to see the mouseover effect.

You can even make a whole bunch of them. Mouseover them!

Tutorial Pages:
» CSS & Round Corners - The problem
» The solution
» Adding the left corner
» And the right corner
» The final touch

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS