html - bootstrap 分页 CSS 使边框变粗但内部边框变粗

Question

我怎样才能让 bootstrap 分页 CSS 使周围的边框变粗而不是内部的边框？喜欢下面这张图片吗？

我试过了，但是我使用的 css 全部生成了，有人可以帮我解决这个问题吗？谢谢。

html:

<ul class="pagination pull-right">
    <li><a href="#">First</a></li>
    <li class="disabled"><a href="#">Previous</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">116</a></li>
    <li><a href="#">Next</a></li>
    <li><a href="#">Last</a></li>
  </ul>

CSS:

.pagination>li>a, .pagination>li>span {
   border: 4px solid #ddd;
}

js fiddle :https://jsfiddle.net/8hnhmxh8/

Answer 1

.pagination {
  border: 4px solid #ddd;
}
.pagination > li > a {
   border: 1px solid #ddd;
   border-radius: 0px!important;
}

JSFIDDLE