Border thickness transition

Question

Is there a way to ease-in-out between 2 border thicknesses?

My code:

nav a {
border-bottom: 1px solid #AADA4B;
}


nav a:hover {
border-bottom: 3px solid #AADA4B;
}

Thanks very much for the help. Sam.

Answer 1

Sure, just transition border or border-width on the a element:

nav a {
/* -moz-, -o-, -webkit- prefixes omitted for brevity */
transition: border-width 0.1s ease-in-out;
border-bottom: 1px solid #AADA4B;
}