rounded-l

The rounded-l class in Tailwind CSS applies the default border-radius to the left side of an element — affecting both the top-left and bottom-left corners. It's commonly used when styling buttons, input groups, or cards that require soft edges only on one side.

Syntax

``html

## Example Code

```html
<div class="flex">
  <button class="bg-gray-300 px-4 py-2 rounded-l">Prev</button>
  <button class="bg-blue-600 text-white px-4 py-2 ">Next</button>
</div>

Preview

This adds a smooth radius to only the left side of the "Prev" button, often useful in paired or grouped buttons.

How to Use

Add the rounded-l class directly to your HTML element:

<div class="rounded-l">
  <!-- Your content here -->
</div>

Responsive Usage

Use Tailwind's responsive prefixes to apply rounded-l at specific breakpoints:

<div class="sm:rounded-l md:rounded-l lg:rounded-l">
  Responsive element
</div>

• sm:rounded-l — applies from 640px and up
• md:rounded-l — applies from 768px and up
• lg:rounded-l — applies from 1024px and up

Customization

You can extend or override this utility in your tailwind.config.js. See the Tailwind CSS documentation for details on customizing your theme.

Related Classes

• Browse all Border Radius classes
• All Tailwind CSS classes