We would like to know how to animate to do transition on border-style.
<!DOCTYPE html>
<html>
<head>
<!-- w ww. j ava 2s . c o m-->
<style type='text/css'>
#main_menu a, #main_menu li {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
#main_menu li:hover {
background: #EEE;
border-style: outset;
border-color: blue
}
#main_menu li {
list-style: none;
border: 3px outset #AAA;
margin: 10px;
background: #AAA;
}
</style>
</head>
<body>
<ul id="main_menu">
<li><a href="#">test</a></li>
</ul>
</body>
</html>
The code above is rendered as follows: