如何修改Bootstrap tabs标签页的边框颜色与边框宽度？

你使用的是Bootstrap 3版本的tabs组件，默认边框样式分散在nav-tabs导航栏、标签项、tab-content内容区三个位置，只需在Bootstrap默认CSS引入后添加自定义样式覆盖默认规则即可，可自行调整边框宽度、深蓝色色值适配需求。

自定义样式参考 #

/* 标签导航栏底部边框 */
.nav-tabs {
  border-bottom: 2px solid #003399; /* 2px为边框宽度，#003399为深蓝色，可自行修改 */
}
/* 普通标签项的边框 */
.nav-tabs > li > a {
  border: 2px solid #003399;
  border-bottom-color: transparent; /* 底部边框透明，避免和导航栏底部边框重叠 */
  margin-right: 2px;
  background-color: #f8f8f8;
}
/* 标签hover状态的边框 */
.nav-tabs > li > a:hover {
  border-color: #003399;
  border-bottom-color: #003399;
  background-color: #e9ecef;
}
/* 激活状态标签的边框 */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 2px solid #003399;
  border-bottom-color: transparent; /* 底部透明和内容区衔接 */
}
/* 标签内容区的边框 */
.tab-content {
  border: 2px solid #003399;
  border-top: none; /* 顶部不设边框，和导航栏的底部边框衔接 */
  padding: 15px;
}

修改后完整代码 #

将上述样式放在Bootstrap CSS引用之后即可生效：

<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/3.4.1/css/bootstrap.min.css">
<!-- 自定义样式放在Bootstrap CSS之后，确保覆盖默认样式 -->
<style>
.nav-tabs {
  border-bottom: 2px solid #003399;
}
.nav-tabs > li > a {
  border: 2px solid #003399;
  border-bottom-color: transparent;
  margin-right: 2px;
  background-color: #f8f8f8;
}
.nav-tabs > li > a:hover {
  border-color: #003399;
  border-bottom-color: #003399;
  background-color: #e9ecef;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 2px solid #003399;
  border-bottom-color: transparent;
}
.tab-content {
  border: 2px solid #003399;
  border-top: none;
  padding: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
   $('#myTable').on('click', '.clickable-row', function(event) {
       $(this).addClass('active').siblings().removeClass('active');
   });
</script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#invoice_selection">Invoice Selection</a></li>
<li><a data-toggle="tab" href="#order_summary">Order Summary</a></li>
</ul>

<div class="tab-content">
<div id="invoice_selection" class="tab-pane fade in active">
<div class="table-responsive">
<table class="table" id="myTable">
<thead>
<tr class="clickable-row">
<th>Select</th>
<th>Invoice Number</th>
<th>Due Date</th>
<th>Proce</th>
<th>Due in Days</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>
   <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" unchecked>
   </div>
</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
</tr>
</tbody>
</table>
   </div>
</div>
<div id="order_summary" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>

</body>
</html>

内容的提问来源于stack exchange，提问作者james bond