Open In App

How to Add Borders to Pagination in CSS ?

Last Updated : 21 Mar, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

Add borders to Pagination is when you have many pages of content and must move between them. Making these page buttons look better can make navigating easier and more enjoyable for users. One way to do this is by adding borders to the page buttons using CSS.

These are the following approaches:

Table of Content

Using Border Property

This method uses CSS to directly apply borders to pagination elements via the border property, enhancing their visual distinction. It allows for customization of border width, style, and color to suit the design aesthetics of the website.

Example: This example shows the implementation of the bordered pagination by the use of the border property.

HTML
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Add borders to pagination in CSS</title>
    <style>
        h5 {
            text-align: center;
        }

        .pagination {
            display: flex;
            justify-content: center;
        }

        .page-link {
            display: inline-block;
            padding: 5px 10px;
            margin-right: 5px;
            text-decoration: none;
            border: 1px solid green;
        }

        .page-link:hover {
            border-color: rgb(33, 10, 184);
            background-color: rgb(151, 151, 207);
            color: white;
        }
    </style>
</head>

<body>
    <h5>Adding Borders to Pagination in
          CSS using Border Property
      </h5>
    <div class="pagination">
        <a href="#" class="page-link">1</a>
        <a href="#" class="page-link">2</a>
        <a href="#" class="page-link">3</a>
    </div>
</body>

</html>

Output:

paginationborder
Output

Using Border-Style Property

This method centers a pagination section on a webpage and adds dotted borders to pagination links using the border-style property. The links change border color and background on hover to enhance interactivity, It improves the way pagination is visually presented, which improves user interaction and makes navigation easier.

Example: This example shows the implementation of the bordered pagination by the use of the border-style property.

HTML
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Add borders to pagination</title>
    <style>
        h5 {
            text-align: center;
        }

        .pagination {
            display: flex;
            justify-content: center;
        }

        .page-link {
            display: inline-block;
            padding: 5px 10px;
            margin-right: 5px;
            text-decoration: none;
            border-style: dotted;
            border-width: 2px;
            border-color: green;
            border-radius: 4px;
        }

        .page-link:hover {
            border-color: rgb(33, 10, 184);
            background-color: rgb(163, 225, 179);
            color: white;
        }
    </style>
</head>

<body>
    <h5>Adding borders to Pagination 
          Using Border-Style Property
      </h5>
    <div class="pagination">
        <a href="#" class="page-link">1</a>
        <a href="#" class="page-link">2</a>
        <a href="#" class="page-link">3</a>
    </div>
</body>

</html>

Output:

paginationborderstyle
Output

Using Box-Shadow Property

This HTML and CSS code center aligns a pagination section within a webpage using Flexbox. Pagination links are styled with borders using the "box-shadow" property, and they change color and background on hover to enhance interactivity.

Example: This example shows the implementation of the bordered pagination by the use of the box-shadow property.

HTML
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Adding Borders to Pagination</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .pagination {
            display: flex;
            justify-content: center;
        }

        .page-link {
            display: inline-block;
            padding: 5px 10px;
            margin-right: 5px;
            text-decoration: none;
            box-shadow: 0 0 0 2px #837d7d;
            border-radius: 4px;
        }

        .page-link:hover {
            border-color: rgb(33, 10, 184);
            background-color: rgb(151, 151, 207);
            color: white;
        }
    </style>
</head>

<body>
    <h5>Adding Borders to Pagination
          using Box-Shadow Property
      </h5>
    <div class="pagination">
        <a href="#" class="page-link">1</a>
        <a href="#" class="page-link">2</a>
        <a href="#" class="page-link">3</a>
    </div>
</body>

</html>

Output:

paginationboxshadow
Output

Similar Reads

How to add Borders and Shadows to Elements in CSS ?
Apply box shadows to elements to create a 3D effect, whereas adding borders to containers or boxes can enhance the structural clarity of a layout. In this article, we will learn how to add borders and shadows to the elements in CSS. We will explore two different approaches to adding borders and shadows. Table of Content Using the border and box-sha
2 min read
How to Add Hoverable Pagination using CSS ?
Pagination is a common technique for controlling content that covers multiple pages. Hoverable pagination provides a sleek alternative to traditional pagination styles by enabling users to preview the content without clicking by hovering over the pagination elements. Traditional pagination styles require users to click through numbered links to nav
2 min read
Pure CSS Table with Horizontal Borders
A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add a "pure-table" class to add styles to the table. This class adds padding and borders to table elements and emphasizes the header. A table with Horizontal Borde
2 min read
Tailwind CSS Borders Complete Reference
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Border utility settings the radius, width, color, opacity, etc., of element's borders. all the properties covered as in this class form. Tailwind CSS Class Description Example Border RadiusIt is used to set the borde
2 min read
Primer CSS Responsive Borders
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
3 min read
Primer CSS Borders
Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible. Primer CSS Borders is a utility class that applies borders to a div container of HTML by simply apply
3 min read
Pure CSS applying Padding and Borders to Grid Units
Pure CSS is a free and open-source CSS framework. It is a set of instruments for developing responsive websites and online applications. This was created by Yahoo and is used to create websites that are quicker, more aesthetically beautiful, and more user-friendly. It effectively replaces Bootstrap. The responsive design was considered when creatin
3 min read
Gradient borders in CSS
Creating visually appealing borders can significantly enhance the user experience on your website. One such technique is the use of gradient borders. Although CSS does not directly support gradient borders, there are two effective methods to achieve this: Try It: .custom-item { border: 1px solid gray; font-family: 'Gill Sans', 'Gill Sans MT', Calib
4 min read
CSS Borders
A CSS border is a line that surrounds an HTML element, providing a visual separation between the element and its surroundings. Borders can be styled in various ways, including adjusting their width, color, and style. The basic properties used to define borders in CSS are border-width, border-style, and border-color. Here, We covered CSS borders, in
5 min read
How to Add Pagination in HTML Table ?
Pagination is a common feature in web applications, especially when dealing with large datasets. It helps in dividing the data into manageable chunks, improving the user experience by reducing the amount of data displayed at once and speeding up page loading times. In this article, we will discuss the approach to add pagination to an HTML table usi
3 min read
How to add Pagination in Nextjs using Algolia ?
Adding pagination to a Next.js application with Algolia involves fetching and displaying paginated search results from Algolia’s API. This setup provides an efficient way to handle large datasets by loading data in chunks. In this article, we will learn How we can add pagination in the NextJS project using Algolia. ApproachTo add our search feature
2 min read
How to remove borders of a canvas-type text using Fabric.js ?
In this article, we are going to see how to remove the borders of a canvas-like text using FabricJS. The canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use a JavaScript library called FabricJS. After importing
2 min read
How to set the collapsing borders model for a table ?
CSS describes the way HTML elements should be displayed. There are various CSS properties that can add magic to the basic HTML document. This article is focused on setting the collapsing borders model for the table element of HTML. HTML tables allow us to arrange our data using rows and columns. The <table> tag defines an HTML table. Each tab
3 min read
Borders in bootstrap with examples
Borders: Borders are generally used to display an outline around a box or table cell or any other HTML element. In Bootstrap, there are different classes available to add or remove borders. The classes that are used to add borders are referred as Additive classes and those that are used to remove borders are referred as subtractive classes. Additiv
4 min read
How to remove controlling borders of a canvas circle using Fabric.js ?
In this article, we are going to see how to remove the controlling borders of a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible, we are go
2 min read
How to change Input box borders after filling the box using JavaScript ?
In this article, we will change the input border after filling in the text on the input text field. The onchange event attribute works when the value of the element changes and selects the new value from the list. Approach: Whenever the input value is changed with some value by the user, the onchange event attribute is triggered. After the event is
2 min read
React MUI Borders
Material UI is an open-source design framework that showcases different components made in react. It is developed and maintained by Google since 2014. What is Borders API offered by Material UI? The Borders API, provided by MUI, allows us to control the border and border-radius of DOM elements that have border utilities. passed to Borders API props
3 min read
Tachyons Theming Borders
CSS border properties allow us to set the style, color, and width of the border. Tachyon is a toolkit that is used to create a responsive website. Used Classes: Border: The "ba" class is used to create a simple border.Border Top: The "bt" class is used to create a border from the top.Border Right: The "br" class is used to create a border from the
4 min read
Bootstrap 5 Borders Sizes
Bootstrap 5 Border utility is used to set the style of the border element. The border styles can be of border-color, border-width, border-radius, etc. The Border Sizes are used to set the border-radius rounded corners larger or smaller. The range of border sizes varies from 0 to 3, where 0 represents smaller-size rounded corners and 3 represents la
2 min read
Bootstrap 5 Table borders
Bootstrap 5 Table borders classes are used to set or unset the border of the table. With bootstrap 5 table borders are easy to customize with border or no border. Bordered tables: This is used to set the border on each side of the table.Tables without borders: This is used to make the table borderless all over the table like there will be no row an
2 min read
Bootstrap 5 Borders Subtractive
Bootstrap5 Borders Subtractive is used to remove borders from the box by defining which side the border is to be removed or we can remove the border from all sides at once. Bootstrap 5 Borders Subtractive Classes: border-0: This class is used to remove borders from all around the elementborder-top-0: This class is used to remove the border from the
3 min read
Bootstrap 5 Borders Additive
Bootstrap5 Borders Additive classes are mainly used to display an outline around a box and it provides style, color, and radius of an element border on the side we want. For eg: if we want the border only on the top of the box we can have it by using the border-top additive class. Bootstrap 5 Borders Additive classes: border: This class is used to
2 min read
Bootstrap 5 Tables without borders
Bootstrap5 Tables without borders is used to create a table in borderless form. It is mostly used when we do not want to show the separation in the table content. Tables without Borders Class: table-borderless: This class is used to create borderless tables Syntax: <table class="table table-borderless"> ... </table> Example 1: In this e
2 min read
HTML Table Borders
HTML Table Borders define the visible lines around cells and the overall table. They help in creating clear distinctions between various sections of the table, making it easier to understand and show information clearly. This attribute allows you to control the border's style, color, and width, for the visual presentation of your table. Syntaxtable
5 min read
Chakra UI Borders
Chakra UI is a popular React component library that simplifies the process of building user interfaces with a set of customizable and accessible components. Among those feature it also provide support for styling and layout including the management of borders. It provides various properties to customize borders. In this article, we will learn about
2 min read
Bootstrap 5 Borders
Bootstrap 5 Borders offer predefined border styles to elements. Classes like .border, .border-0, .border-top, .border-bottom, .border-left, and .border-right provide easy customization for borders, including color, width, and radius, enhancing UI design. iframe { width: 100%; height: 450px;} @media (max-width: 1145px) {.article--viewer .a-wrapper .
2 min read
CSS Pagination
Pagination is the process of dividing the document into pages and providing them with numbers. Types of Pagination: There are many types of pagination in CSS. Some of them are given below: Simple PaginationActive and Hoverable PaginationRounded Active and Hoverable ButtonsHoverable Transition EffectBordered PaginationRounded Border PaginationCenter
7 min read
Primer CSS Previous/Next Pagination
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
Materialize CSS Pagination
Pagination is used to separate the content into discrete pages that is short and easy to understand. Materialize CSS provide classes to create a pagination bar that holds the links to the other pages. The pagination class is used to set the <ul> list element as a pagination component. The pages that have to be shown are defined inside this co
2 min read
How to we create Pagination in Materialize CSS ?
Materialize CSS is a front-end UI library that is created by Google using the combination of HTML, CSS, and JavaScript. It is basically a design language that combines classic design along with modern innovations and technology. The purpose of Google behind developing Materialize CSS is to provide a unified system design for all their products acro
3 min read
three90RightbarBannerImg