'Removing rounded corners from pagination

The following CSS removes rounded corners from the next button in Bootstrap:

.pagination>li:last-child>a{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

I want to remove rounded corners from the previous button too. So I did this:

.pagination a {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;    
}

Why doesn't this work? Isn't it supposed to remove rounded corners from all a inside .pagination?

Solution 1:^[1]

Option 1 (recommended) :

.pagination>li:first-child>a, .pagination>li:first-child>span {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

Option 2 (recommended) :

.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-radius: 0;
}

Option 3 (not recommended) :

.pagination>li>a, .pagination>li>span {
    border-radius: 0 !important;
}

Option 4 (not recommended) :

.pagination * {
    border-radius: 0 !important;
}

Note :

I recommend AGAINST these last two options, because !important ignores specificity, which should be avoided as much as you can, because it makes your code more difficult to maintain! However, it does allow you to use smaller selectors!

As makshh explains, the reason your code doesn't work, is because it doesn't have the correct specificity.

Solution 2:^[2]

The problem is your selector specificity. .pagination > a has lower specificity than .pagination > li:first-child > a and your code does not work.

You have two options:

First is to override all Bootstrap styles for pagination:

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

Second is to create your own custom class with !important rule to override Bootstrap styles and add this class to your div with pagination class:

.pagination-no-border-radius > li > a,
.pagination-no-border-radius > li > span {
  border-radius: 0 !important;
}

Solution 3:^[3]

To remove the border radius from all a try

.pagination a {
  border-radius: 0!important;
}

Solution 4:^[4]

For those looking to remove border-radius from pagination in Bootstrap 4 :

.page-item {
  &:first-child .page-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  &:last-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	miken32
Solution 2
Solution 3	Raja Khoury
Solution 4	Lucas

'Removing rounded corners from pagination

Solution 1:[1]