1px border issue not displaying - html

Question

I'm trying to highlight a specific product on the comparison table. The highlight color is Red but i'm having issues when using 1px, but when i use 2px it works fine but 2px is to big.
Also noticed on this code snippet it does not display RED borders after i have added bootstrap, so attaching a screenshot.
My goal is to have Selected Product to be surrounded by RED 1px border. Also i would not mind any other tips of displaying these types of table.
I have also tried this but did not work: https://muffinman.io/fix-for-chrome-not-rendering-borders/
Also looks like this is not Bootstrap issue, if i remove the BS and use border-collapse: collapse; same problem
.table {
margin: 20px;
display: inline-block;
text-align: center;
}
table,
th,
td {
border: 1px solid #ddd;
padding: 10px;
}
th:not(:first-child) {
width: 200px;
}
table,
th {
font-weight: normal;
}
.border-sides {
border-right: 1px solid red !important;
border-left: 1px solid red !important;
}
.border-top {
border-top: 1px solid red !important;
}
.border-bottom {
border-bottom: 1px solid red !important;
}
.bg-selected {
background-color: #b3c2ff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table">
<table>
<thead>
<tr>
<th></th>
<th>
<div class="text-left">
<span>Title - Product 1 Test</span>
</div>
</th>
<th class="border border-top">
<div class="text-left">
<span class="font-weight-bold">Selected Product:</span>
<span>Title - Product 2</span>
</div>
</th>
<th>
<div class="text-left">
<span>Title - Product 2</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<button class="btn btn-primary">View</button>
</td>
<td class="border border-sides">
<button class="btn btn-primary">Buy now</button>
</td>
<td>
<button class="btn btn-primary">View</button>
</td>
</tr>
<tr class="text-left">
<td>Description 1</td>
<td>Y</td>
<td class="border bg-selected">N</td>
<td>N</td>
</tr>
<tr class="text-left">
<td class="test">Description 2</td>
<td>N</td>
<td class="border bg-selected">N</td>
<td>N</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary">View</button>
</td>
<td class="border border-bottom">
<button class="btn btn-primary">Buy now</button>
</td>
<td>
<button class="btn btn-primary">View</button>
</td>
</tr>
</tbody>
</table>
</div>
Also double checked my BS is running first then my CSS or i'm missing something?

Answer 1

Is this the desired ouput?
UPDATED
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<style>
.table {
margin: 20px;
display: inline-block;
text-align: center;
}
table,
.table thead th,
.table td {
border: 1px solid #ddd;
border-collapse: separate;
border-spacing: 0px;
padding: 10px;
}
table {
padding: 0;
border-width: 0 2px 0 0.5px;
}
th:not(:first-child) {
width: 200px;
}
table,
th {
font-weight: normal;
}
.table thead th{
border-top-width: 1px;
}
.table tr:last-child td{
border-bottom-width: 1px;
}
.table thead th, .table td{
border-right: none;
}
.border-sides {
border-right: 1px solid red !important;
border-left: 1px solid red !important;
}
.border-sides + td, .table thead .border-sides + th{
border-left: none;
}
.border-top {
border-top: 1px solid red !important;
}
.border-bottom {
border-bottom: 1px solid red !important;
}
.bg-selected {
background-color: #b3c2ff;
}
</style>
<div class="table">
<table>
<thead>
<tr>
<th></th>
<th>
<div class="text-left">
<span>Title - Product 1 Test</span>
</div>
</th>
<th class="border border-top border-sides">
<div class="text-left">
<span class="font-weight-bold">Selected Product:</span>
<span>Title - Product 2</span>
</div>
</th>
<th>
<div class="text-left">
<span>Title - Product 2</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<button class="btn btn-primary">View</button>
</td>
<td class="border border-sides">
<button class="btn btn-primary">Buy now</button>
</td>
<td>
<button class="btn btn-primary">View</button>
</td>
</tr>
<tr class="text-left">
<td>Description 1</td>
<td>Y</td>
<td class="border bg-selected border-sides">N</td>
<td>N</td>
</tr>
<tr class="text-left">
<td class="test">Description 2</td>
<td>N</td>
<td class="border border-sides bg-selected">N</td>
<td>N</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary">View</button>
</td>
<td class="border border-bottom border-sides">
<button class="btn btn-primary">Buy now</button>
</td>
<td>
<button class="btn btn-primary">View</button>
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

You can add td for your rule, for example td.border-top then it makes it more specific then the BS rule and overrides it