CSS3 Border Radius for Hover States

By Louis Lazaris

One of the huge benefits to using CSS3 is the ability to create image-like effects without the use of images. CSS3 gradients, shadows, and rounded corners have helped designers greatly in this area.

While browsing the website of well-known web hosting company Media Temple, I stumbled upon their Labs page and noticed they’re using a block hover effect on the list of items, and the hover state uses (what I assume is) theborder-radius property when the background becomes visible.

There is nothing extremely unique or innovative about this effect, and some of you have probably already used it, but it’s just one of those things that, once you discover it, it really helps drive home the point that CSS3 can help us build websites that are much easier to maintain.

No More Images

In the past, to create a block hover state that had rounded corners, we had no choice but to create an image to appear on the element’s background. And if the size of the box changed at any point, we’d have to re-slice and re-export the image to the correct size.

With browsers that support CSS3, you just need the following code on your hover state:

view plain?

1. a.button:hover {  
2.     background-color: #fff;  
3.     color: #fff;  
4.     -webkit-border-radius: 8px;  
5.     -moz-border-radius: 8px;  
6.     border-radius: 8px;  
7. }  

On the regular link state, there is no background color, but when the hover state is activated, the background appears, and does so with rounded corners. Browsers that don’t support it will just show a square-cornered hover state, so not a big deal.

Although the effect seems pretty obvious, for those of us who are used to the old method of doing things, we may not be accustomed to thinking in this manner, and will naturally assume that we’ll need images to create this.

• View Demo