Border Radius

Defines the radius of an element's corners.

Classes#

Class	Properties
border-noround	border-radius: 0;
border-round	border-radius: var(--border-radius);
border-round-xs	border-radius: 0.125rem;
border-round-sm	border-radius: 0.25rem;
border-round-md	border-radius: 0.375rem;
border-round-lg	border-radius: 0.5rem;
border-round-xl	border-radius: 0.75rem;
border-round-2xl	border-radius: 1rem;
border-round-3xl	border-radius: 1.5rem;
border-circle	border-radius: 50%;
border-noround-left	border-top-left-radius: 0; border-bottom-left-radius: 0;
border-noround-top	border-top-left-radius: 0; border-top-right-radius: 0;
border-noround-right	border-top-right-radius: 0; border-bottom-right-radius: 0;
border-noround-bottom	border-bottom-left-radius: 0; border-bottom-right-radius: 0;
border-round-left	border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);
border-round-top	border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius);
border-round-bottom	border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);
border-round-right	border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);
border-round-left-xs	border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
border-round-top-xs	border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem;
border-round-bottom-xs	border-bottom-left-radius: 0.125rem; border-bottom-right-radius: 0.125rem;
border-round-right-xs	border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem;
border-round-left-sm	border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
border-round-top-sm	border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
border-round-bottom-sm	border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
border-round-right-sm	border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
border-round-left-md	border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
border-round-top-md	border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem;
border-round-bottom-md	border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
border-round-right-md	border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
border-round-left-lg	border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
border-round-top-lg	border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;
border-round-bottom-lg	border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
border-round-right-lg	border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
border-round-left-xl	border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
border-round-top-xl	border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;
border-round-bottom-xl	border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
border-round-right-xl	border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
border-round-left-2xl	border-top-left-radius: 1rem; border-bottom-left-radius: 1rem;
border-round-top-2xl	border-top-left-radius: 1rem; border-top-right-radius: 1rem;
border-round-bottom-2xl	border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;
border-round-right-2xl	border-top-right-radius: 1rem; border-bottom-right-radius: 1rem;
border-round-left-3xl	border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem;
border-round-top-3xl	border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;
border-round-bottom-3xl	border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem;
border-round-right-3xl	border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem;
border-circle-left	border-top-left-radius: 50%; border-bottom-left-radius: 50%;
border-circle-top	border-top-left-radius: 50%; border-top-right-radius: 50%;
border-circle-bottom	border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;
border-circle-right	border-top-right-radius: 50%; border-bottom-right-radius: 50%;

Examples#

border-round

border-round-left

border-round-top

border-round-bottom

border-round-right

<div class="flex flex-wrap justify-content-center">
    <div class="border-round w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round</div>
    <div class="border-round-left w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-left</div>
</div>
<div class="flex flex-wrap justify-content-center">
    <div class="border-round-top w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-top</div>
    <div class="border-round-bottom w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-bottom</div>
    <div class="border-round-right w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-right</div>
</div>

oval

circle

<div class="flex flex-wrap justify-content-center">
    <div class="border-circle w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">oval</div>
    <div class="border-circle w-6rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">circle</div>
</div>

No Rounding#

border-noround

<div class="flex flex-wrap md:justify-content-start justify-content-center">
    <div class="border-noround w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-noround</div>
</div>

Responsive#

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:border-circle to use a responsive class.

Class	Description
sm:	small screens e.g. phones
md:	medium screens e.g. tablets
lg:	large screens e.g. notebooks
xl:	larger screens e.g monitors

Responsive Radius

<div class="flex flex-wrap justify-content-center">
    <div class="border-noround md:border-circle w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">Responsive Radius</div>
</div>