⌘ K
esc

    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-round
    border-round-left
    border-round-top
    border-round-bottom
    border-round-right
    
    <div class="card">
        <div class="card-container blue-container">
            <div class="flex flex-wrap justify-content-center">
                <div class="border-round w-12rem h-6rem m-2 bg-blue-500 text-white font-bold flex align-items-center justify-content-center">border-round</div>
                <div class="border-round-left w-12rem h-6rem m-2 bg-blue-500 text-white 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-blue-500 text-white 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-blue-500 text-white 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-blue-500 text-white font-bold flex align-items-center justify-content-center">border-round-right</div>
            </div>
        </div>
    </div>
    
    
    oval
    circle
    
    <div class="card">
        <div class="card-container yellow-container">
            <div class="flex flex-wrap justify-content-center">
                <div class="border-circle w-12rem h-6rem m-2 bg-yellow-500 text-gray-900 font-bold flex align-items-center justify-content-center"></div>
                <div class="border-circle w-6rem h-6rem m-2 bg-yellow-500 text-gray-900 font-bold flex align-items-center justify-content-center">circle</div>
            </div>
        </div>
    </div>
    
    
    No Rounding
    border-noround
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-start justify-content-center card-container green-container">
            <div class="border-noround w-12rem h-6rem m-2 bg-green-500 text-white font-bold flex align-items-center justify-content-center">border-noround</div>
        </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">
        <div class="flex flex-wrap justify-content-center card-container purple-container">
            <div class="border-noround md:border-circle w-12rem h-6rem m-2 bg-purple-500 text-white font-bold flex align-items-center justify-content-center">Responsive Radius</div>
        </div>
    </div>