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