Pagenation với border radius

Trở về

  • 3,074

Pagenation với border-radius, dạng khác, chỉ điều chỉnh border-radius nhưng hiệu quả thấy rõ.

border-radius cho pagination

Tạo border bo góc tròn cho pagination bằng cách sử dụng border-radius.

Html viết:

<meta charset="utf-8">
<title>Học Web Chuẩn</title>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
.pagination {
    position: relative;
    text-align: center;
.pagination ol li {
.pagination ol {
    margin: 0 10px;
.pagination a,
.pagination ol li span {
    border: 2px solid #ccc;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    color: #333;
    display: inline-block;
    padding: 1px 8px 2px;
    text-decoration: none;
.pagination a:hover {
    border: 2px solid #f00;
    color: #f00;
.pagination ol li span {
    color: #f00;
    font-weight: bold;
.pagination p {
    position: absolute;
    top: 0;
.pagination p.previous {
    left: 0;
.pagination {
    right: 0;
<div class="pagination">
<p class="previous"><a href="">&lt;&lt; Previous</a></p>
<li><a href="">1</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<p class="next"><a href="">Next &gt;&gt;</a></p>

Hiển thị trình duyệt:


Download file để thực hành

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.