I created buttons and wants the border to be green. From some reason - only the left and top border change the color. I tried to add explicitly border-bottom-color and right-border-color the it didn't help...
.main-table
{
//width: 40%;
//margin-top: 2%;
margin-left: 20%;
border-thick: 10px;
border-color: green;
border-bottom-color: green;
}
.sub-button{
border-thick: 10px;
border-color: green;
border-bottom-color: green;
border-right-color: green;
height: 100px;
width: 100%;
font-family: calibary;
background-color: white;
}
th, tr, td {
text-align:center;
padding:5px;
border-thick: 10px;
border-color: green;
border-bottom-color: green;
}<table class="main-table"><tr><td><button class="sub-button" type="button" id="reports" accessKey=0 align="middle" [routerLink]="['../../reports/historical-data']"><h4>Reports</h4><h6>Access and review daily and weekly statistics</h6></button></td><td><button class="sub-button" type="button" id="documents" accessKey=0 size="lg" align="middle" [routerLink]="['../../documentation/product-documentation']"><h4>Documentation</h4><h6>Download the latest product specification</h6></button></td></tr><tr><td><button class="sub-button" type="button" id="test" accessKey=0 size="lg" align="middle" [routerLink]="['../../test-diagnostics/live-query']"><h4>Test a Number</h4><h6>Discover a numbers attributes across all services</h6></button></td><td><button class="sub-button" type="button" id="ticket" accessKey=0 size="lg" align="middle" [routerLink]="['../../support/ticket']"><h4>Support</h4><h6>Open a ticket with the XConnect Technical team</h6></button></td></tr>Thanks!