How to set border-radius for an Element in Tailwind CSS?

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.