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-circle border-radius: 50%;
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);
Examples
border-noround
border-round
border-circle
border-round-left
border-round-top
border-round-bottom
border-round-right

<div class="card flex flex-wrap md:justify-content-start justify-content-center">
    <div class="border-noround border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-noround</div>
    <div class="border-round border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-round</div>
    <div class="border-circle border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-circle</div>
    <div class="border-round-left border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-round-left</div>
    <div class="border-round-top border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-round-top</div>
    <div class="border-round-bottom border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-round-bottom</div>
    <div class="border-round-right border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-round-right</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.

  • 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="card flex justify-content-center">
    <div class="border-noround md:border-circle border-1 border-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">Responsive Radius</div>
</div>