changing and adding colors/borders to css for tabs in a page

I have created tabs in a page and would like to add a few things but, don't quite know how.
Everything else is working so that is good!

1. How can I get each tab to be outlined?
2. How can I change the link text to a different color at hover or at current page?

Here is the css I used:
/* Style the list */
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #f9eeea;
background-color: #f9eeea;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #c87055;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

Thank you in advance. Linda iempoweru