Utilities for controlling the border radius of an element.
Use utilities like rounded-sm and rounded-md to apply different border radius sizes to an element:
Use utilities like rounded-t-md and rounded-r-lg to only round one side of an element:
Use utilities like rounded-tr-md and rounded-tl-lg utilities to only round one corner of an element:
Use utilities like rounded-s-md and rounded-se-xl to set the border radius using logical properties, which map to the appropriate corners based on the text direction:
Here are all the available border radius logical property utilities and their physical property equivalents in both LTR and RTL modes.
{
<table>
<thead>
<tr>
<th>Class</th>
<th>Left-to-right</th>
<th>Right-to-left</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>rounded-s-*</code>
</td>
<td>
<code>rounded-l-*</code>
</td>
<td>
<code>rounded-r-*</code>
</td>
</tr>
<tr>
<td>
<code>rounded-e-*</code>
</td>
<td>
<code>rounded-r-*</code>
</td>
<td>
<code>rounded-l-*</code>
</td>
</tr>
<tr>
<td>
<code>rounded-ss-*</code>
</td>
<td>
<code>rounded-tl-*</code>
</td>
<td>
<code>rounded-tr-*</code>
</td>
</tr>
<tr>
<td>
<code>rounded-se-*</code>
</td>
<td>
<code>rounded-tr-*</code>
</td>
<td>
<code>rounded-tl-*</code>
</td>
</tr>
<tr>
<td>
<code>rounded-es-*</code>
</td>
<td>
<code>rounded-bl-*</code>
</td>
<td>
<code>rounded-br-*</code>
</td>
</tr>
<tr>
<td>
<code>rounded-ee-*</code>
</td>
<td>
<code>rounded-br-*</code>
</td>
<td>
<code>rounded-bl-*</code>
</td>
</tr>
</tbody>
</table>}
For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.
Use the rounded-full utility to create pill buttons:
Use the rounded-none utility to remove an existing border radius from an element: