Question

In my code, I want my -webkit-transition: border 2s; to refer on hover, and for -webkit-transition: border 2s; // a different colored border on :focus to refer on focus. How do I do that? Does it require JavaScript?

Answer 1

selector {
   border: 1px red solid;
   -webkit-transition: border 2s;
}
selector:hover { border: 5px red solid; }
selector:focus { border: 1px green solid; }

in the selector you specify a border shorthand property and a transition that will change only that specific property

so, on hover and focus pseudoclasses you will change that specific property based on what you want to change