Connected.Components/Styles/utilities/borders/_border-radius.scss

$border-radiuses: ( "0": 0, "sm": 2px, "lg": 8px, "xl": 24px);

@each $size, $value in $border-radiuses {
    .rounded-#{$size} {
        border-radius: $value !important;
    }

    .rounded-t-#{$size} {
        border-top-left-radius: $value !important;
        border-top-right-radius: $value !important;
    }

    .rounded-r-#{$size}, .rounded-e-#{$size} {
        border-top-right-radius: $value !important;
        border-bottom-right-radius: $value !important;
    }

    .rounded-b-#{$size} {
        border-bottom-right-radius: $value !important;
        border-bottom-left-radius: $value !important;
    }

    .rounded-l-#{$size}, .rounded-s-#{$size} {
        border-top-left-radius: $value !important;
        border-bottom-left-radius: $value !important;
    }

    .rounded-tl-#{$size}, .rounded-ts-#{$size} {
        border-top-left-radius: $value !important;
    }

    .rounded-tr-#{$size}, .rounded-te-#{$size} {
        border-top-right-radius: $value !important;
    }

    .rounded-br-#{$size}, .rounded-be-#{$size} {
        border-bottom-right-radius: $value !important;
    }

    .rounded-bl-#{$size}, .rounded-bs-#{$size} {
        border-bottom-left-radius: $value !important;
    }

    //--------------------------- rtl styles ---------------------------
    .application-layout-rtl {
        .rounded-s-#{$size} {
            border-top-right-radius: $value !important;
            border-bottom-right-radius: $value !important;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

        .rounded-e-#{$size} {
            border-top-left-radius: $value !important;
            border-bottom-left-radius: $value !important;
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        .rounded-ts-#{$size} {
            border-top-right-radius: $value !important;
            border-top-left-radius: 0 !important;
        }

        .rounded-te-#{$size} {
            border-top-left-radius: $value !important;
            border-top-right-radius: 0 !important;
        }

        .rounded-bs-#{$size} {
            border-bottom-right-radius: $value !important;
            border-bottom-left-radius: 0 !important;
        }

        .rounded-be-#{$size} {
            border-bottom-left-radius: $value !important;
            border-bottom-right-radius: 0 !important;
        }
    }
    //------------------------------------------------------------------
}

.rounded {
    border-radius: var(--default-borderradius) !important;
}

.rounded-t {
    border-top-left-radius: var(--default-borderradius) !important;
    border-top-right-radius: var(--default-borderradius) !important;
}

.rounded-r, .rounded-e {
    border-top-right-radius: var(--default-borderradius) !important;
    border-bottom-right-radius: var(--default-borderradius) !important;
}

.rounded-b {
    border-bottom-right-radius: var(--default-borderradius) !important;
    border-bottom-left-radius: var(--default-borderradius) !important;
}

.rounded-l, .rounded-s {
    border-top-left-radius: var(--default-borderradius) !important;
    border-bottom-left-radius: var(--default-borderradius) !important;
}

.rounded-tl, .rounded-ts {
    border-top-left-radius: var(--default-borderradius) !important;
}

.rounded-tr, .rounded-te {
    border-top-right-radius: var(--default-borderradius) !important;
}

.rounded-br, .rounded-be {
    border-bottom-right-radius: var(--default-borderradius) !important;
}

.rounded-bl, .rounded-bs {
    border-bottom-left-radius: var(--default-borderradius) !important;
}

//--------------------------- rtl styles ---------------------------
.application-layout-rtl {
    .rounded-s {
        border-top-right-radius: var(--default-borderradius) !important;
        border-bottom-right-radius: var(--default-borderradius) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .rounded-e {
        border-top-left-radius: var(--default-borderradius) !important;
        border-bottom-left-radius: var(--default-borderradius) !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .rounded-ts {
        border-top-right-radius: var(--default-borderradius) !important;
        border-top-left-radius: 0 !important;
    }

    .rounded-te {
        border-top-left-radius: var(--default-borderradius) !important;
        border-top-right-radius: 0 !important;
    }

    .rounded-bs {
        border-bottom-right-radius: var(--default-borderradius) !important;
        border-bottom-left-radius: 0 !important;
    }

    .rounded-be {
        border-bottom-left-radius: var(--default-borderradius) !important;
        border-bottom-right-radius: 0 !important;
    }
}
//------------------------------------------------------------------


.rounded-circle {
    border-radius: 50% !important;
}

.rounded-pill {
    border-radius: 9999px !important;
}