How to set rounded corners on hover?

[toplisek]

I like to get coloured boxes which are rounded when I hover.

Please find the following script as sample:
<div id="myboxes">

<div class="item1">
<a href="">
<img width="280" height="280" alt="" src="images/myitem1.jpg">
</a>
</div>

</div>

and CSS CLASS:
#myboxes .item1 {
border-radius: 10px 10px 10px 10px;
float: left;
width: 280px;
height: 280px
}
#myboxes .item1.hover {
background: none repeat scroll 0 0 #000000;
cursor: pointer;
}
#myboxes .item1.hover a {
text-decoration: none;
}

Why is hover not working? Need help.

[londrum]

you've got

#myboxes .item1.hover

it should be

#myboxes .item1:hover

with a semi-colon

[toplisek]

Is it technical possible to use .item1.hover?

As I understand IE did not support border-radius: 10px 10px 10px 10px; in the past. Is this supported inside new editions like V9?

[rocknbil]

.item1.hover would be a class of item 1 with a class of hover

<a class="item1 hover">

It would be a very bad idea to create a class name like that, but it would probably work.

As I understand IE did not support border-radius: 10px 10px 10px 10px; in the past. Is this supported inside new editions like V9?

There are some workarounds. and BTW you only need

border-radius:10px;

for all four corners. This may or may not be overhead, but you can see what it does.

-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;