|
Setting a border radius for an Element in Tailwind CSS is accomplished using the rounded-[size] utility class, where [size] can be predefined size identifiers like sm, md, lg, xl, or numerical values. This class defines the rounded corners of the element.
Preview
The below table illustrates the border-radius classes alongside their corresponding descriptions.
| Class |
Description |
rounded-sm |
Small border-radius. |
rounded-md |
Medium border-radius (default). |
rounded-lg |
Large border-radius. |
rounded-xl |
Extra-large border-radius. |
rounded-2xl |
Even larger border-radius. |
rounded-full |
Full border-radius, creating a circle. |
Syntax
<div class="rounded-md">
This element has medium rounded corners.
</div>
Here, the rounded-[size] Class defines the border radius of the element. Replace [size] with predefined size identifiers or numerical values. The border-radius utility class accepts numeric values ranging from 0 to full, where full represents 100%.
Key Features
- Predefined Sizes: Tailwind offers predefined border-radius sizes (
sm, md, lg, xl) for quick and consistent styling.
- Numerical Control: Use numerical values for precise control over border radius, allowing customization to match specific design requirements.
- Uniform Styling: Apply the
rounded-[size] class to ensure uniform and consistent rounded corners throughout the project.
- Responsive Design: Utilize responsive variants (
sm:, md:, lg:, xl:) to adapt border-radius based on different screen sizes.
|
