Last updated: 4 May 2024

Tailwind CSS Border Radius

The tailwind border radius utility enables you to apply rounded corners to various sides of an element such as buttons, cards, or containers. To apply tailwind border radius, simply add rounded-[size].


Tailwind Border Radius

The tailwind border radius utility enables you to apply rounded corners to various elements such as buttons, cards, or containers. With Tailwind's border radius classes, you can achieve different levels of roundness based on your design requirements.

Applying Border Radius in Tailwind CSS

In Tailwind, border radius can be applied using utility classes in the format of rounded-{size}. By default, Tailwind provides the following border radius sizes: sm, md, lg, xl, and 2xl, where sm is the smallest radius and 2xl is the largest.

For example, to apply a medium border radius to a div, you would use the rounded-md class as shown below:

html
<div class="rounded ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-full ..."></div>

Preview

Rounded

Rounded-md

Rounded-lg

Rounded-full

Types of Tailwind Border Radius

Tailwind No Rounded Button

html
<button class=" border-none rounded-none....">Button</button>

Preview

Tailwind Border Pill Button

html
<button type="button" class="rounded-full....">
Click me
</button>

Preview

Tailwind Border Radius classes and Properties

ClassProperties
rounded-noneborder-radius: 0px;
rounded-smborder-radius: 0.125rem; 2px
roundedborder-radius: 0.25rem; 4px
rounded-mdborder-radius: 0.375rem; 6px
rounded-lgborder-radius: 0.5rem; 8px
rounded-xlborder-radius: 0.75rem; 12px
rounded-2xlborder-radius: 1rem; 16px
rounded-3xlborder-radius: 1.5rem; 24px
rounded-fullborder-radius: 9999px;
rounded-s-noneborder-start-start-radius: 0px;
border-end-start-radius: 0px;
rounded-s-smborder-start-start-radius: 0.125rem;
border-end-start-radius: 0.125rem;
rounded-sborder-start-start-radius: 0.25rem;
border-end-start-radius: 0.25rem;
rounded-s-mdborder-start-start-radius: 0.375rem;
border-end-start-radius: 0.375rem;
rounded-s-lgborder-start-start-radius: 0.5rem;
border-end-start-radius: 0.5rem;
rounded-s-xlborder-start-start-radius: 0.75rem;
border-end-start-radius: 0.75rem;
rounded-s-2xlborder-start-start-radius: 1rem;
border-end-start-radius: 1rem;
rounded-s-3xlborder-start-start-radius: 1.5rem;
border-end-start-radius: 1.5rem;
rounded-s-fullborder-start-start-radius: 9999px;
border-end-start-radius: 9999px;
rounded-e-noneborder-start-end-radius: 0px;
border-end-end-radius: 0px;
rounded-e-smborder-start-end-radius: 0.125rem;
border-end-end-radius: 0.125rem;
rounded-eborder-start-end-radius: 0.25rem;
border-end-end-radius: 0.25rem;
rounded-e-mdborder-start-end-radius: 0.375rem;
border-end-end-radius: 0.375rem;
rounded-e-lgborder-start-end-radius: 0.5rem;
border-end-end-radius: 0.5rem;
rounded-e-xlborder-start-end-radius: 0.75rem;
border-end-end-radius: 0.75rem;
rounded-e-2xlborder-start-end-radius: 1rem;
border-end-end-radius: 1rem;
rounded-e-3xlborder-start-end-radius: 1.5rem;
border-end-end-radius: 1.5rem;
rounded-e-fullborder-start-end-radius: 9999px;
border-end-end-radius: 9999px;
rounded-t-noneborder-top-left-radius: 0px;
border-top-right-radius: 0px;
rounded-t-smborder-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
rounded-tborder-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
rounded-t-mdborder-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
rounded-t-lgborder-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
rounded-t-xlborder-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
rounded-t-2xlborder-top-left-radius: 1rem;
border-top-right-radius: 1rem;
rounded-t-3xlborder-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
rounded-t-fullborder-top-left-radius: 9999px;
border-top-right-radius: 9999px;
rounded-r-noneborder-top-right-radius: 0px;
border-bottom-right-radius: 0px;
rounded-r-smborder-top-right-radius: 0.125rem;
border-bottom-right-radius: 0.125rem;
rounded-rborder-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
rounded-r-mdborder-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
rounded-r-lgborder-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
rounded-r-xlborder-top-right-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
rounded-r-2xlborder-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
rounded-r-3xlborder-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
rounded-r-fullborder-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
rounded-b-noneborder-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
rounded-b-smborder-bottom-right-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
rounded-bborder-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
rounded-b-mdborder-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
rounded-b-lgborder-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
rounded-b-xlborder-bottom-right-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
rounded-b-2xlborder-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
rounded-b-3xlborder-bottom-right-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
rounded-b-fullborder-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
rounded-l-noneborder-top-left-radius: 0px;
border-bottom-left-radius: 0px;
rounded-l-smborder-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
rounded-lborder-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
rounded-l-mdborder-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
rounded-l-lgborder-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
rounded-l-xlborder-top-left-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
rounded-l-2xlborder-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
rounded-l-3xlborder-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
rounded-l-fullborder-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
rounded-ss-noneborder-start-start-radius: 0px;
rounded-ss-smborder-start-start-radius: 0.125rem; 2px
rounded-ssborder-start-start-radius: 0.25rem; 4px
rounded-ss-mdborder-start-start-radius: 0.375rem; 6px
rounded-ss-lgborder-start-start-radius: 0.5rem; 8px
rounded-ss-xlborder-start-start-radius: 0.75rem; 12px
rounded-ss-2xlborder-start-start-radius: 1rem; 16px
rounded-ss-3xlborder-start-start-radius: 1.5rem; 24px
rounded-ss-fullborder-start-start-radius: 9999px;
rounded-se-noneborder-start-end-radius: 0px;
rounded-se-smborder-start-end-radius: 0.125rem; 2px
rounded-seborder-start-end-radius: 0.25rem; 4px
rounded-se-mdborder-start-end-radius: 0.375rem; 6px
rounded-se-lgborder-start-end-radius: 0.5rem; 8px
rounded-se-xlborder-start-end-radius: 0.75rem; 12px
rounded-se-2xlborder-start-end-radius: 1rem; 16px
rounded-se-3xlborder-start-end-radius: 1.5rem; 24px
rounded-se-fullborder-start-end-radius: 9999px;
rounded-ee-noneborder-end-end-radius: 0px;
rounded-ee-smborder-end-end-radius: 0.125rem; 2px
rounded-eeborder-end-end-radius: 0.25rem; 4px
rounded-ee-mdborder-end-end-radius: 0.375rem; 6px
rounded-ee-lgborder-end-end-radius: 0.5rem; 8px
rounded-ee-xlborder-end-end-radius: 0.75rem; 12px
rounded-ee-2xlborder-end-end-radius: 1rem; 16px
rounded-ee-3xlborder-end-end-radius: 1.5rem; 24px
rounded-ee-fullborder-end-end-radius: 9999px;
rounded-es-noneborder-end-start-radius: 0px;
rounded-es-smborder-end-start-radius: 0.125rem; 2px
rounded-esborder-end-start-radius: 0.25rem; 4px
rounded-es-mdborder-end-start-radius: 0.375rem; 6px
rounded-es-lgborder-end-start-radius: 0.5rem; 8px
rounded-es-xlborder-end-start-radius: 0.75rem; 12px
rounded-es-2xlborder-end-start-radius: 1rem; 16px
rounded-es-3xlborder-end-start-radius: 1.5rem; 24px
rounded-es-fullborder-end-start-radius: 9999px;
rounded-tl-noneborder-top-left-radius: 0px;
rounded-tl-smborder-top-left-radius: 0.125rem; 2px
rounded-tlborder-top-left-radius: 0.25rem; 4px
rounded-tl-mdborder-top-left-radius: 0.375rem; 6px
rounded-tl-lgborder-top-left-radius: 0.5rem; 8px
rounded-tl-xlborder-top-left-radius: 0.75rem; 12px
rounded-tl-2xlborder-top-left-radius: 1rem; 16px
rounded-tl-3xlborder-top-left-radius: 1.5rem; 24px
rounded-tl-fullborder-top-left-radius: 9999px;
rounded-tr-noneborder-top-right-radius: 0px;
rounded-tr-smborder-top-right-radius: 0.125rem; 2px
rounded-trborder-top-right-radius: 0.25rem; 4px
rounded-tr-mdborder-top-right-radius: 0.375rem; 6px
rounded-tr-lgborder-top-right-radius: 0.5rem; 8px
rounded-tr-xlborder-top-right-radius: 0.75rem; 12px
rounded-tr-2xlborder-top-right-radius: 1rem; 16px
rounded-tr-3xlborder-top-right-radius: 1.5rem; 24px
rounded-tr-fullborder-top-right-radius: 9999px;
rounded-br-noneborder-bottom-right-radius: 0px;
rounded-br-smborder-bottom-right-radius: 0.125rem; 2px
rounded-brborder-bottom-right-radius: 0.25rem; 4px
rounded-br-mdborder-bottom-right-radius: 0.375rem; 6px
rounded-br-lgborder-bottom-right-radius: 0.5rem; 8px
rounded-br-xlborder-bottom-right-radius: 0.75rem; 12px
rounded-br-2xlborder-bottom-right-radius: 1rem; 16px
rounded-br-3xlborder-bottom-right-radius: 1.5rem; 24px
rounded-br-fullborder-bottom-right-radius: 9999px;
rounded-bl-noneborder-bottom-left-radius: 0px;
rounded-bl-smborder-bottom-left-radius: 0.125rem; 2px
rounded-blborder-bottom-left-radius: 0.25rem; 4px
rounded-bl-mdborder-bottom-left-radius: 0.375rem; 6px
rounded-bl-lgborder-bottom-left-radius: 0.5rem; 8px
rounded-bl-xlborder-bottom-left-radius: 0.75rem; 12px
rounded-bl-2xlborder-bottom-left-radius: 1rem; 16px
rounded-bl-3xlborder-bottom-left-radius: 1.5rem; 24px
rounded-bl-fullborder-bottom-left-radius: 9999px;

Windframe Tailwind blocks

Content

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates