Is there a way to customize only the outer border of a bootstrap 4 table by changing properties such as border-color, border-style, and border-radius? I attempted to do so, but it seems that the properties are being overridden. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107a7f787e507568717d607c753e737f7d">[email protected]</a></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="345955464d74514c55594458511a575b59">[email protected]</a></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177d627b6e57726f767a677b723974787a">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>