Tailwind CSS Border Radius

The border-radius property is used to add rounded corners to an element. In Tailwind CSS, you can use the border-radius utility to set the border radius of an element.

Syntax

The syntax for using the border-radius utility class in Tailwind CSS is as follows:

<div class="rounded"></div>
<div class="rounded-[size]"></div>
<div class="rounded-[size]-[size]"></div>
<div class="rounded-[tl]-[tr]-[br]-[bl]"></div>

• Use rounded to set all four corners to have the same radius.
• Use rounded-[size] to set all four corners to have the same radius size, where [size] is a number between 0 and 6 (e.g. rounded-3).
• Use rounded-[size]-[size] to set the horizontal and vertical radii of all four corners separately.
• Use rounded-[tl]-[tr]-[br]-[bl] to set each corner radius separately, where [tl] is top-left, [tr] is top-right, [br] is bottom-right, and [bl] is bottom-left. Each value can be a number between 0 and 6.

Examples

Example 1

<div class="rounded">This element has rounded corners</div>

Example 2

<div class="rounded-3">This element has a border-radius of 0.125rem (or 2px)</div>

Example 3

<div class="rounded-3xl">This element has a border-radius of 1.5rem (or 24px)</div>

Example 4

<div class="rounded-tl-3 rounded-bl-3 rounded-br-6">This element has different border-radius values for its corners</div>

Output

The above code examples will generate the following output:

Example 1 Output

Example 2 Output

Example 3 Output

Example 4 Output

Explanation

• The rounded class sets the border radius of an element to the default value of 0.25rem (or 4px).
• The rounded-[size] class sets all four corners of an element to have the same radius size.
• The rounded-[size]-[size] class sets the horizontal and vertical radii of all four corners separately.
• The rounded-[tl]-[tr]-[br]-[bl] class sets each corner radius separately.

Use

The border-radius utility in Tailwind CSS is useful for quickly and easily adding rounded corners to elements without having to write custom CSS. It allows you to set the corner radius of an element to a specific size or to specify different radii for each corner.

Important Points

• The border-radius utility classes in Tailwind CSS use the same values as the border-radius property in CSS.
• You can use any value between 0 and 6 for the [size] placeholder in the rounded-[size] class.
• You can use any values between 0 and 6 for the [tl], [tr], [br], and [bl] placeholders in the rounded-[tl]-[tr]-[br]-[bl] class.
• You can combine the rounded class with any of the other rounded-[size], rounded-[size]-[size], or rounded-[tl]-[tr]-[br]-[bl] classes to create complex border radii.

Summary

The border-radius utility in Tailwind CSS allows you to easily add rounded corners to elements with just a few classes. You can set all four corners to have the same radius, specify a radius size, or set each corner radius separately. This utility is helpful for creating visually interesting designs with minimal CSS code.