CSS3 Border Radius for Hover States

CSS3 Border Radius for Hover StatesOne 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) the border-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:

a.button:hover {
  background-color: #fff;
  color: #fff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

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.

35 Responses

  1. krisztian says:

    I tried this solution in the past: the problem is that as the anchor element is in front of the text, you cannot highlight or select (and therefore copy and paste) it. I always try to solve everything with pure XHTML and CSS, but I’d use Jquery in this particular case to change the background color property of the div on hover. Of course, this is excellent for buttons, but not for elements containing text.

  2. Roshan says:

    It work in other browsers but doesn’t work in IE so is there any solution???

  3. nick says:

    I have a couple of div buttons and I just use the .class:hover (and :focus) – but in my case i’m using jQuery to handle the click function for the buttons because they’re swapping out and activating/deactivating different forms. You could have the LI’s light up on hover but still only the text would be an actual link, so that might create a false impression of clickability and then confuse or frustrate the user when clicking produces no results.

  4. really helping technique you sharing. thanks

  5. Multyshades says:

    great article very informative, thanks for share this

  6. Really nice tips….

  7. mrhassell says:

    Excellent example of CSS3 in action!

  8. Elijah says:

    If you give any solution for IE it will very usefull. Thanks

  9. ufuk says:

    thanks alot… great workk..

  10. radius log says:

    I’m still a newbie in using CSS and this post is very interesting for me. I hope you post more of your discoveries in using CSS.

  11. Abba Bryant says:

    If you don’t care about IE support – and with border-radius you automatically don’t – then why not apply the :hover pseudo-class to the li directly so that you can still have the text-selection and mitigate the issues from comment #1.

    It also would allow you to have more than just a single link destination as the click. If you don’t mind losing some clickable area you gain the freedom to have links on the content in the blocks ( it would be nice to click on “Mysql Server” or “beta testing…” to get more info on the topics )

  12. John says:

    There is an online css3 border radius generator:
    http://www.webestools.com/css3-border-radius-generator-moz-webkit-rounded-corner-code-maker.html

    I hope that the next IE version will support border-radius.

  13. It seems you can never learn too much about CSS. Thanks for sharing this with the rest of us!

  14. Roy Barber says:

    More CSS3 Greatness! ive just used this for a coda effect popup on hover, no need for images anymore, and falls back nicely! Learning from the archives!

  15. Trang says:

    I am a dummy who has a problem with border-top-left-radius and border-top-right-radius. If you go to espn.com, I am trying to build a similar navmenu. The thing is if I hover mouse from navmenu li to navmenu sub1, all become rounded which I don’t like or all become squared which I have to accept right now (I have 3-level menu).

    I hope you get what I mean and can help me fix that. Thanks so much.

    ul#navmenu {
    border-radius: 9px;
    }
    ul#navmenu li:hover a:hover {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    }
    ul#navmenu li: visited a {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    }
    ul#navmenu .sub2 li:hover > a {
    border-radius: 0px;
    }

    • You’re going to have to show an example. But my first instinct is that you have an error in your code. In the third declaration block above, you have “ul#navmenu li: visited a”. That can’t be right. It should be something like “ul#navmenu li a:visited”.

      The best thing for you to do is put your code into a demo page, using JSBin.com or Codepen.io, or something like that, and then I can fix it for you.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).