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 */ {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

border: 1px solid #f9eeea;

background-color: #f9eeea;


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

/* Style the links inside the list items */ 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 */ li a:hover {background-color: #c87055;}

/* Create an active/current tablink class */ 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