Fade a css border to invisible?

Question

Is it possible to fade an element's border away? To clarify, this needs to be triggered from javascript, and using something like jquery for animation is NOT an option. We're using sencha but it doesn't look like you can animate anything but element size and position with extjs. I know css3 has some handy animation, but I can't find anything similar to my needs.

Answer 1

Something like this ?

div.transition {
  border: 5px solid rgba(0,0,0,1);
  height: 100px;
  width: 100px;
  background-color: #ffffff;

  -webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */
     -moz-transition: border-color 1s linear; /* FF3.7+ */
       -o-transition: border-color 1s linear; /* Opera 10.5 */
          transition: border-color 1s linear;
}

div.transition:hover {
  border-color: rgba(0,0,0,0);
}

Demo at http://jsfiddle.net/gaby/bcn5c/1/