Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Add rounded borders to first and last link in the pagination using CSS
To add rounded borders to the first and last links in pagination, use the border-radius property along with CSS pseudo-selectors :first-child and :last-child. For the left side, use border-top-left-radius and border-bottom-left-radius properties. For the right side, use border-top-right-radius and border-bottom-right-radius properties.
Syntax
/* Round left corners of first link */
.pagination a:first-child {
border-top-left-radius: value;
border-bottom-left-radius: value;
}
/* Round right corners of last link */
.pagination a:last-child {
border-top-right-radius: value;
border-bottom-right-radius: value;
}
Example
The following example demonstrates how to create a pagination with rounded borders on the first and last links −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
margin: 20px;
}
.demo a {
color: red;
padding: 8px 12px;
text-decoration: none;
transition: background-color 0.3s;
border: 1px dashed orange;
display: inline-block;
}
.demo a.active {
background-color: red;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
.demo a:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.demo a:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<h2>Pagination Example</h2>
<div class="demo">
<a href="/prev.html">« Prev</a>
<a href="/quiz1.html">1</a>
<a href="/quiz2.html">2</a>
<a href="/quiz3.html" class="active">3</a>
<a href="/quiz4.html">4</a>
<a href="/next.html">Next »</a>
</div>
</body>
</html>
A horizontal pagination with dashed orange borders appears. The first link ("« Prev") has rounded left corners, and the last link ("Next »") has rounded right corners. The active page (3) is highlighted in red with white text. Hovering over non-active links shows a yellow background.
Conclusion
Using :first-child and :last-child pseudo-selectors with specific border-radius properties allows you to create professional-looking pagination with rounded corners only on the outer edges, maintaining a cohesive visual design.
Updated on: 2026-03-15T13:00:07+05:30
573 Views
Advertisements