Border radius

Utilities for controlling the border radius of an element


Class reference

ClassProperties
rounded-noneborder-radius: 0
rounded-xsborder-radius: 0.125rem
rounded-smborder-radius: 0.1875rem
roundedborder-radius: 0.25rem
rounded-mdborder-radius: 0.375rem
rounded-lgborder-radius: 0.5rem
rounded-xlborder-radius: 0.75rem
rounded-2xlborder-radius: 1rem
rounded-3xlborder-radius: 1.5rem
rounded-fullborder-radius: 9999px
rounded-t-noneborder-radius-top: 0
rounded-t-xsborder-radius-top: 0.125rem
rounded-t-smborder-radius-top: 0.1875rem
rounded-tborder-radius-top: 0.25rem
rounded-t-mdborder-radius-top: 0.375rem
rounded-t-lgborder-radius-top: 0.5rem
rounded-t-xlborder-radius-top: 0.75rem
rounded-t-2xlborder-radius-top: 1rem
rounded-t-3xlborder-radius-top: 1.5rem
rounded-t-fullborder-radius-top: 9999px
rounded-r-noneborder-radius-right: 0
rounded-r-xsborder-radius-right: 0.125rem
rounded-r-smborder-radius-right: 0.1875rem
rounded-rborder-radius-right: 0.25rem
rounded-r-mdborder-radius-right: 0.375rem
rounded-r-lgborder-radius-right: 0.5rem
rounded-r-xlborder-radius-right: 0.75rem
rounded-r-2xlborder-radius-right: 1rem
rounded-r-3xlborder-radius-right: 1.5rem
rounded-r-fullborder-radius-right: 9999px
rounded-b-noneborder-radius-bottom: 0
rounded-b-xsborder-radius-bottom: 0.125rem
rounded-b-smborder-radius-bottom: 0.1875rem
rounded-bborder-radius-bottom: 0.25rem
rounded-b-mdborder-radius-bottom: 0.375rem
rounded-b-lgborder-radius-bottom: 0.5rem
rounded-b-xlborder-radius-bottom: 0.75rem
rounded-b-2xlborder-radius-bottom: 1rem
rounded-b-3xlborder-radius-bottom: 1.5rem
rounded-b-fullborder-radius-bottom: 9999px
rounded-l-noneborder-radius-left: 0
rounded-l-xsborder-radius-left: 0.125rem
rounded-l-smborder-radius-left: 0.1875rem
rounded-lborder-radius-left: 0.25rem
rounded-l-mdborder-radius-left: 0.375rem
rounded-l-lgborder-radius-left: 0.5rem
rounded-l-xlborder-radius-left: 0.75rem
rounded-l-2xlborder-radius-left: 1rem
rounded-l-3xlborder-radius-left: 1.5rem
rounded-l-fullborder-radius-left: 9999px
rounded-tl-noneborder-radius-top-left: 0
rounded-tl-xsborder-radius-top-left: 0.125rem
rounded-tl-smborder-radius-top-left: 0.1875rem
rounded-tlborder-radius-top-left: 0.25rem
rounded-tl-mdborder-radius-top-left: 0.375rem
rounded-tl-lgborder-radius-top-left: 0.5rem
rounded-tl-xlborder-radius-top-left: 0.75rem
rounded-tl-2xlborder-radius-top-left: 1rem
rounded-tl-3xlborder-radius-top-left: 1.5rem
rounded-tl-fullborder-radius-top-left: 9999px
rounded-tr-noneborder-radius-top-right: 0
rounded-tr-xsborder-radius-top-right: 0.125rem
rounded-tr-smborder-radius-top-right: 0.1875rem
rounded-trborder-radius-top-right: 0.25rem
rounded-tr-mdborder-radius-top-right: 0.375rem
rounded-tr-lgborder-radius-top-right: 0.5rem
rounded-tr-xlborder-radius-top-right: 0.75rem
rounded-tr-2xlborder-radius-top-right: 1rem
rounded-tr-3xlborder-radius-top-right: 1.5rem
rounded-tr-fullborder-radius-top-right: 9999px
rounded-br-noneborder-radius-bottom-right: 0
rounded-br-xsborder-radius-bottom-right: 0.125rem
rounded-br-smborder-radius-bottom-right: 0.1875rem
rounded-brborder-radius-bottom-right: 0.25rem
rounded-br-mdborder-radius-bottom-right: 0.375rem
rounded-br-lgborder-radius-bottom-right: 0.5rem
rounded-br-xlborder-radius-bottom-right: 0.75rem
rounded-br-2xlborder-radius-bottom-right: 1rem
rounded-br-3xlborder-radius-bottom-right: 1.5rem
rounded-br-fullborder-radius-bottom-right: 9999px
rounded-bl-noneborder-radius-bottom-left: 0
rounded-bl-xsborder-radius-bottom-left: 0.125rem
rounded-bl-smborder-radius-bottom-left: 0.1875rem
rounded-blborder-radius-bottom-left: 0.25rem
rounded-bl-mdborder-radius-bottom-left: 0.375rem
rounded-bl-lgborder-radius-bottom-left: 0.5rem
rounded-bl-xlborder-radius-bottom-left: 0.75rem
rounded-bl-2xlborder-radius-bottom-left: 1rem
rounded-bl-3xlborder-radius-bottom-left: 1.5rem
rounded-bl-fullborder-radius-bottom-left: 9999px

# Rounded corners

Use the .rounded-sm, .rounded, or .rounded-lg utilities to apply different border radius sizes to an element.

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

# Pills and circles

Use the .rounded-full utility to create pills and circles.

Pill Shape
Circle
<div class="rounded-full py-2 px-4 flex items-center justify-center">Pill shape</div>
<div class="rounded-full h-16 w-16 flex items-center justify-center">Circle</div>

# No rounding

Use .rounded-none to remove an existing border radius from an element.

This is most commonly used to remove a border radius that was applied at a smaller breakpoint.

.rounded-none
<div class="rounded-none"></div>

# Rounding sides separately

Use .rounded-{t|r|b|l}{-size?} to only round one side an element.

.rounded-t-lg
.rounded-r-lg
.rounded-b-lg
.rounded-l-lg
<div class="rounded-t-lg"></div>
<div class="rounded-r-lg"></div>
<div class="rounded-b-lg"></div>
<div class="rounded-l-lg"></div>

# Rounding corners separately

Use .rounded-{tl|tr|br|bl}{-size?} to only round one corner an element.

.rounded-tl-lg
.rounded-tr-lg
.rounded-br-lg
.rounded-bl-lg
<div class="rounded-tl-lg"></div>
<div class="rounded-tr-lg"></div>
<div class="rounded-br-lg"></div>
<div class="rounded-bl-lg"></div>

# Responsive

To control the border radius of an element at a specific breakpoint, add a {screen}: prefix to any existing border radius utility. For example, use md:rounded-lg to apply the rounded-lg utility at only medium screen sizes and above.

<div class="rounded md:rounded-lg ...">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.