Border Radius

​Basic usage

​Rounded corners

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

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

​Pill buttons

Use the rounded-full utility to create pill buttons.

<button class="rounded-full ...">Save Changes</button>

​No rounding

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

<button class="rounded-none ...">Save Changes</button>

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

​Rounding sides separately

Use the rounded-t-*, rounded-r-*, rounded-b-*, and rounded-l-* utilities to only round one side of 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 the rounded-tl-*, rounded-tr-*, rounded-br-*, and rounded-bl-* utilities to only round one corner of 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>

​Using logical properties

Use the rounded-s-*, rounded-e-*, rounded-ss-*, rounded-se-*, rounded-es-*, and rounded-ee-* utilities to set the border radius using logical properties, which map to the appropriate corners based on the text direction.

<div dir="ltr">
  <div class="rounded-s-lg ..."></div>
<div>

<div dir="rtl">
  <div class="rounded-s-lg ..."></div>
<div>

Here are all the available border color logical property utilities and their physical property equivalents in both LTR and RTL modes.

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

​Applying conditionally

​Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:rounded-lg to only apply the rounded-lg utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. 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>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

​Using custom values

​Customizing your theme

By default, Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the theme.borderRadius section of your Tailwind config.

module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '0.125rem',
      DEFAULT: '0.25rem',
      DEFAULT: '4px',
      'md': '0.375rem',
      'lg': '0.5rem',
      'full': '9999px',
      'large': '12px',
    }
  }
}

Learn more about customizing the default theme in the theme customization documentation.

​Arbitrary values

If you need to use a one-off border-radius value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="rounded-[12px]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.