How to add borders to WooCommerce product page tabs in Zerif

Just add the following CSS code to your WordPress:

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #fff;
    z-index: 2;
    border-bottom: 2px solid #FFF;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 1px solid #d3ced2 ;
    background-color: #ebe9eb ;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-radius: 4px 4px 0 0;
    margin: 0 -5px;
    padding: 0 1em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
   list-style: none !important;
   padding: 0 0 0 1em !important;
   margin: 0 0 0.618em !important;
   overflow: hidden !important;
   position: relative !important;
   text-align: left !important;
}

.tabs {
   border-bottom: 0px solid #CCC !important;
}