Inconsistent styling of pagination in compiled Bootstrap 5-CodePudding

When I compile my Bootstrap 5 sources I get this style of pagination:

But when I attach Bootstrap 5 via CDN I get this result:

Watch the rounded corners only in the firt and the last page links. It seems like border-radius mixin does not work in case of compiled Bootstrap.

How can I get to the style referred in the documentation?

Here is the code from _pagination.scss that probably needs to be overriden:

.page-item {
  &:not(:first-child) .page-link {
    margin-left: $pagination-margin-start;
  }

  @if $pagination-margin-start == (calc($pagination-border-width * -1)) {
    &:first-child {
      .page-link {
        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
      }
    }

    &:last-child {
      .page-link {
        @include border-end-radius(var(--#{$prefix}pagination-border-radius));
      }
    }
  } @else {
    // Add border-radius to all pageLinks in case they have left margin
    .page-link {
      @include border-radius(var(--#{$prefix}pagination-border-radius));
    }
  }
}

CodePudding user response：

Facing the same issue screenshot link

I have found only 1 difference between _pagination.scss from CDN version and scss source:

CDN version (or from official documentation on getbootstrap.com)

@if $pagination-margin-start == ($pagination-border-width * -1) {

source version

@if $pagination-margin-start == (calc($pagination-border-width * -1)) {

Swapping the lines in my own build fixes the issue. Only the first and last links are rounded for now