List header - custom person or group field

Question

I have the below code which modifies the look of my table and it works very well however the columns which are custom made person/group fields are not showing the same font colour as the rest of the columns (black). I believe this might be because of the icon that appears before the name but the 'Modified by' column is fine.

Also does anyone know how to specify a border around the heading row?

Many Thanks

/* ---------- Table Rows ----------*/
/* Set background for every row */
.ms-listviewtable > tbody > tr {
    background: white;
}

/* Set border for every row */
.ms-listviewtable > tbody > tr td{
    border-top: 2px solid Black !important; /* !important needed over override         SharePoint inline style */        
    border-left: 1px solid lightblue!important;
    border-right: 1px solid lightblue!important;
}

/* Set background for every alternating row */
.ms-listviewtable > tbody > tr.ms-alternating {
    background: #F0F8FF;
}

/* ---------- Table Header Row ----------*/
/* Remove background set in SharePoint's general data table style */
.ms-listviewtable tr.ms-viewheadertr {        
   background: transparent;
}

/* Modify background color */
tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
tr.ms-viewheadertr > th.ms-vh, /* Text */
tr.ms-viewheadertr > th.ms-vh2,
tr.ms-viewheadertr > th.ms-vh2-nofilter,
tr.ms-viewheadertr > th.ms-vh2-div,
tr.ms-viewheadertr > th /* Text */ {
    background: #A9A9A9;
    text-align: center;
}

/* Modify background color on hover */
tr.ms-viewheadertr > th.ms-vh:hover,
tr.ms-viewheadertr > th.ms-vh2:hover,
tr.ms-viewheadertr > th  {
    background-color: #778899;
    border-color: #273C51;
}

/* Modify font color */
.ms-viewheadertr a,
.ms-viewheadertr div {
    color: Black;
}


/* Modify font color on hover */
.ms-viewheadertr a:hover,
.ms-viewheadertr div:hover {
    color: white;
}
tr.ms-viewheadertr > th.ms-vh-icon:last-child {
    display:none;
} 

Answer 1

Your color question

I have to see a screenshot

I see you use !important , that means you are missing some more important CSS knowledge about CSS Specificity (around for over a decade):

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Your color black is not applied because the ms-vh classname on the element itself overrules is.

Learn CSS Specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Border around the header

since thead or tr can't have a border, you have to set all TH elements

.ms-listviewtable thead th{
    border-top:1px solid green;
    border-bottom:1px solid green;
}
.ms-listviewtable thead th:first-of-type{
    border-left:1px solid green;
}
.ms-listviewtable thead th:last-of-type{
    border-right:1px solid green;
}

More reading: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048