Border radius

Class reference

# Rounded corners

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

<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.

<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.

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

# Rounding sides separately

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

<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.

<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.