Home/ Questions/Q 247431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T21:15:31+00:00

So I have used – http://www.roundedcornr.com/ – to generate some rounded corners via CSS.

  • 0

So I have used – http://www.roundedcornr.com/ – to generate some rounded corners via CSS. Great – works fine, no probs.

However! I am now really stuck trying to do “hover” rounded corners. I basically got the generator to generate the corners in a lighter color (for the hover) and now have no idea how to implement the lighter hover ?

Does anyone know how to do this in CSS/HTML only ? It should be 100% possible I am just a little unsure.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I only gave the website a short peak and basically they provide you with a couple of PNGs. Not bad, however not the best solution in all cases. Since the current CSS standard doesn’t support rounded corners and beside Firefox/Mozilla no one understands this:

    -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

    I think you are stuck with only one option. Choose a constant height and width for your element and create ONE png out of it. You can than create something like this

    span{
 display:block;
 width:100px; height:100px;     
 background-image:url("nice.png");
}

span:hover{
 background-image:url("nice_hover.png");
}

    Why do I think there is no other way? Because you only can effectively change the attributes of one element at a time with the “hover” effect. Hopefully CSS3 will give us rounded corners… However if you make use of JavaScript this is a completely different story..

    Update

    I thought about it and I probably flopped in presenting you all the available options. Here is a working solution for IE7+, FF, Opera that achieves exactly what you are looking for. Just replace the color with some background-image. Sorry!

    <?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      .content p{
        position:relative;
        height:100px;
        width:400px;
        border:1px solid black;
      }
      .content p span{
        position:absolute;
      }

      .content p .span1{
        left:0;
        top:0;
      }

      .content p .span2{
        right:0;
        top:0;
      }

      .content p .span3{
        left:0;
        bottom:0;
      }

      .content p .span4{
        right:0;
        bottom:0;
      }

      .content p:hover .span1{
        background-color:red; 
      }

      .content p:hover .span2{
        background-color:blue; 
      }

      .content p:hover .span3{
        background-color:green; 
      }

      .content p:hover .span4{
        background-color:yellow; 
      }
    </style>
  <body>
    <div class="content">
      <p>
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="span3">3</span>
        <span class="span4">4</span>
      </p>
    </div>
    </body>
</html>
    • 0