Border Radius In Tailwind CSS
This article will take an in-depth look at how to use Tailwind border radius class to customize the border radius of your Html elements.
Designing a website that’s visually appealing and easy to navigate is essential, and one way to achieve that is by incorporating rounded corners with Tailwind border radius classes.
Table Of Content-
Tailwind Border Radius
Border radius refers to the roundness of an element’s corners.
It is a significant aspect of designing websites, as it can make the website appear modern and sleek.
Tailwind CSS provides a wide range of border radius classes, which makes it easy for developers to add rounded corners to their website’s elements.
Syntax
<element class="rounded-{Border-Radius}">....</element>Using this class, you can set the border radius which is the curvature of the edges.
Tailwind Border Radius Classes
- rounded-none : This class resets the border radius to 0, effectively removing any rounded corners.
- rounded-sm : This class is used for applying a border radius of 0.125rem (or 2px) to all four corners of an element.
- rounded : A border radius of 0.25rem (or 4px) is applied to all four edges of the element using this class.
- rounded-md : An element with this class has a border radius of 0.375rem (or 6px) around all four corners.
- rounded-lg : Using this class, all four corners of an element are rounded by 0.5 rem (or 8px).
- rounded-xl : In this class, a border radius of 0.75rem (or 12px) is applied to all four corners of an element.
- rounded-2xl : A border radius of 1rem (or 16px) is applied to all four edges of the element using this class.
- rounded-3xl : It applies a border radius of 1.5rem (or 24px) to all four corners of the element.
- rounded-full : By applying a 50% border radius, it creates a circular shape.
- rounded-t-none : The top left and top right corners of the element are removed, while the bottom left and bottom right corners are preserved.
- rounded-r-none : The top right and bottom right corners of the element are removed, while the bottom left and top left corners are preserved.
- rounded-b-none : The bottom left and bottom right corners of the element are removed, while the top left and top right corners are preserved.
- rounded-l-none : The top left and bottom left corners of the element are removed, while the bottom right and top right corners are preserved.
- rounded-t-sm : This class is used for applying a border radius of 0.125rem (or 2px) to all four corners of an element.
- rounded-r-sm : Using this class, the bottom-right and top-right corners of elements are rounded by 0.125 rem (or 2px).
- rounded-b-sm : As a result of this class, a border radius of 0.125rem (or 2px) is applied to the bottom-left and bottom-right corners of elements.
- rounded-l-sm : In this class, a border radius of 0.125rem (or 2px) is applied to the bottom-left and top-left corners of an element.
- rounded-t : An element with this class has its top left and top right corners rounded by 0.25rem (or 4px), but its bottom left and bottom right corners remain unrounded.
- rounded-r : An element with this class has its bottom right and top right corners rounded by 0.25rem (or 4px), but its top left and bottom left corners remain unrounded.
- rounded-b : An element with this class has its bottom left and bottom right corners rounded by 0.25rem (or 4px), but its top left and top right corners remain unrounded.
- rounded-l : An element with this class has its top left and bottom left corners rounded by 0.25rem (or 4px), but its top right and bottom right corners remain unrounded.
- rounded-t-md : This class is used for applying a border radius of 0.375rem (or 6px) to only top left and top right corners of an element.
- rounded-r-md : This class is used for applying a border radius of 0.375rem (or 6px) to only top right and bottom right corners of an element.
- rounded-b-md : This class is used for applying a border radius of 0.375rem (or 6px) to only bottom left and bottom right corners of an element.
- rounded-l-md : This class is used for applying a border radius of 0.375rem (or 6px) to only top left and bottom left corners of an element.
- rounded-t-lg : In this case, top right and top left corners of the element have a border radius of 0.5rem (or 8px).
- rounded-r-lg : In this case, top right and bottom right corners of the element have a border radius of 0.5rem (or 8px).
- rounded-b-lg : In this case, bottom right and bottom left corners of the element have a border radius of 0.5rem (or 8px).
- rounded-l-lg : In this case, bottom right and top left corners of the element have a border radius of 0.5rem (or 8px).
- rounded-t-xl : There is a border radius of 0.75rem (or 12px) applied to the top right and top left corners.
- rounded-r-xl : There is a border radius of 0.75rem (or 12px) applied to the top right and bottom right corners.
- rounded-b-xl : There is a border radius of 0.75rem (or 12px) applied to the bottom right and bottom right corners.
- rounded-l-xl : There is a border radius of 0.75rem (or 12px) applied to the top left and left right corners.
- rounded-t-2xl : This class applies a 1rem (or 16px) border radius to the top left and top right corners of the element.
- rounded-r-2xl : This class applies a 1rem (or 16px) border radius to the bottom left and top right corners of the element.
- rounded-b-2xl : This class applies a 1rem (or 16px) border radius to the bottom left and bottom right corners of the element.
- rounded-l-2xl : This class applies a 1rem (or 16px) border radius to the top left and bottom left corners of the element.
- rounded-t-3xl : In this case, the top right and top left corners of the element have a border radius of 1.5rem (or 24px).
- rounded-r-3xl : In this case, the top right and bottom right corners of the element have a border radius of 1.5rem (or 24px).
- rounded-b-3xl : In this case, the bottom right and bottom left corners of the element have a border radius of 1.5rem (or 24px).
- rounded-l-3xl : In this case, the bottom left and top left corners of the element have a border radius of 1.5rem (or 24px).
- rounded-t-full : An element with this class has a border radius of 50% on its top right and top left corners.
- rounded-r-full : An element with this class has a border radius of 50% on its bottom right and top right corners.
- rounded-b-full : An element with this class has a border radius of 50% on its bottom right and bottom left corners.
- rounded-l-full : An element with this class has a border radius of 50% on its top left and bottom left corners.
- rounded-tl-none : The top left corner of the element is removed, while the other corners are preserved.
- rounded-tr-none : The top right corner of the element is removed, while the other corners are preserved.
- rounded-br-none : The bottom right corner of the element is removed, while the other corners are preserved.
- rounded-bl-none : The bottom left corner of the element is removed, while the other corners are preserved.
- rounded-tl-sm : It applies a border radius of 0.125rem (or 2px) to the top left corner of the element.
- rounded-tr-sm : It applies a border radius of 0.125rem (or 2px) to the top right corner of the element.
- rounded-br-sm : It applies a border radius of 0.125rem (or 2px) to the bottom right corner of the element.
- rounded-bl-sm : It applies a border radius of 0.125rem (or 2px) to the bottom left corner of the element.
- rounded-tl : A border radius of 0.25rem (or 4px) is applied to the top left edge of the element using this class.
- rounded-tr : A border radius of 0.25rem (or 4px) is applied to the top right edge of the element using this class.
- rounded-br : A border radius of 0.25rem (or 4px) is applied to the bottom right edge of the element using this class.
- rounded-bl : A border radius of 0.25rem (or 4px) is applied to the bottom left edge of the element using this class.
- rounded-tl-md : In this case, the top left corner of the element has a border radius of 0.375rem (or 6px).
- rounded-tr-md : In this case, the top right corner of the element has a border radius of 0.375rem (or 6px).
- rounded-br-md : In this case, the bottom right corner of the element has a border radius of 0.375rem (or 6px).
- rounded-bl-md : In this case, the bottom left corner of the element has a border radius of 0.375rem (or 6px).
- rounded-tl-lg : By using this class, a border radius of 0.5 rem (equivalent to 8px) is applied to only the top left corner of the element.
- rounded-tr-lg : By using this class, a border radius of 0.5 rem (equivalent to 8px) is applied to only the top right corner of the element.
- rounded-br-lg : By using this class, a border radius of 0.5 rem (equivalent to 8px) is applied to only the bottom right corner of the element.
- rounded-bl-lg : By using this class, a border radius of 0.5 rem (equivalent to 8px) is applied to only the bottom left corner of the element.
- rounded-tl-xl : This class applies a border radius of 0.75rem (which is equal to 12px) specifically to the top left corner of the element.
- rounded-tr-xl : This class applies a border radius of 0.75rem (which is equal to 12px) specifically to the top right corner of the element.
- rounded-br-xl : This class applies a border radius of 0.75rem (which is equal to 12px) specifically to the bottom right corner of the element.
- rounded-bl-xl : This class applies a border radius of 0.75rem (which is equal to 12px) specifically to the bottom left corner of the element.
- rounded-tl-2xl : By utilizing this class, the top left corner of the element is given a border radius of 1rem (equal to 16px).
- rounded-tr-2xl : By utilizing this class, the top right corner of the element is given a border radius of 1rem (equal to 16px).
- rounded-br-2xl : By utilizing this class, the bottom right corner of the element is given a border radius of 1rem (equal to 16px).
- rounded-bl-2xl : By utilizing this class, the bottom left corner of the element is given a border radius of 1rem (equal to 16px).
- rounded-tl-3xl : Applying this class gives the element’s top left corner a border radius of 1.5 rem (equivalent to 24px).
- rounded-tr-3xl : Applying this class gives the element’s top right corner a border radius of 1.5 rem (equivalent to 24px).
- rounded-br-3xl : Applying this class gives the element’s bottom right corner a border radius of 1.5 rem (equivalent to 24px).
- rounded-bl-3xl : Applying this class gives the element’s bottom left corner a border radius of 1.5 rem (equivalent to 24px).
- rounded-tl-full : When this class is applied, the top left corner of the element has a border radius of 50%.
- rounded-tr-full : When this class is applied, the top right corner of the element has a border radius of 50%.
- rounded-br-full : When this class is applied, the bottom right corner of the element has a border radius of 50%.
- rounded-bl-full : When this class is applied, the bottom left corner of the element has a border radius of 50%.
In this example we have covered rounded-none, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl and rounded-full classes in Tailwind:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Border Radius Class in Tailwind CSS</p>
<div class="mx-4 grid grid-rows-5 grid-flow-col gap-2 p-2 font-semibold">
<div class="rounded-none bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-none</div>
<div class="rounded-sm bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-sm</div>
<div class="rounded bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded</div>
<div class="rounded-md bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-md</div>
<div class="rounded-lg bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-lg</div>
<div class="rounded-xl bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-xl</div>
<div class="rounded-2xl bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-2xl</div>
<div class="rounded-3xl bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-3xl</div>
<div class="rounded-full bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-full</div>
</div>
</body>
</html>
In this example, we will explore some of the Tailwind CSS classes that allow us to customize the border radius of specific corners or edges of an element.
These classes are known as rounded-t-sm, rounded-t-lg, rounded-t-xl, rounded-t-full, rounded-b-sm, rounded-b-lg, rounded-b-xl, and rounded-b-full:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Border Radius Class in Tailwind CSS</p>
<div class="mx-4 grid grid-rows-4 grid-flow-col gap-2 p-2 font-semibold">
<div class="rounded-t-sm bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-t-sm</div>
<div class="rounded-t-lg bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-t-lg</div>
<div class="rounded-t-xl bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-t-xl</div>
<div class="rounded-t-full bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-t-full</div>
<div class="rounded-b-sm bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-b-sm</div>
<div class="rounded-b-lg bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-b-lg</div>
<div class="rounded-b-xl bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-b-xl</div>
<div class="rounded-b-full bg-gray-400 w-48 h-12 m-2 flex items-center justify-center">
rounded-b-full</div>
</div>
</body>
</html>
In this example we have used the classes rounded-tr-sm, rounded-tr-lg, rounded-tl-3xl, rounded-tl-full, rounded-br-sm, rounded-br-lg, rounded-bl-3xl and rounded-bl-full.:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Border Radius Class in Tailwind CSS</p>
<div class="mx-4 grid grid-rows-4 grid-flow-col gap-2 p-2 font-semibold">
<div class="rounded-tr-sm bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-tr-sm</div>
<div class="rounded-tr-lg bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-tr-lg</div>
<div class="rounded-tl-3xl bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-tl-3xl</div>
<div class="rounded-tl-full bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-tl-full</div>
<div class="rounded-br-sm bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-br-sm</div>
<div class="rounded-br-lg bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-br-lg</div>
<div class="rounded-bl-3xl bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-bl-3xl</div>
<div class="rounded-bl-full bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-bl-full</div>
</div>
</body>
</html>
Here in this example we have demonstrated Tailwind classes: rounded-r-md, rounded-r-xl, rounded-r-2xl, rounded-r-full, rounded-l-md, rounded-l-xl, rounded-l-2xl and rounded-l-full:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Border Radius Class in Tailwind CSS</p>
<div class="mx-4 grid grid-rows-4 grid-flow-col gap-2 p-2 font-semibold">
<div class="rounded-r-md bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-r-md</div>
<div class="rounded-r-xl bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-r-xl</div>
<div class="rounded-r-2xl bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-r-2xl</div>
<div class="rounded-r-full bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-r-full</div>
<div class="rounded-l-md bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-l-md</div>
<div class="rounded-l-xl bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-l-xl</div>
<div class="rounded-l-2xl bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-l-2xl</div>
<div class="rounded-l-full bg-gray-300 w-48 h-12 m-2 flex items-center justify-center">
rounded-l-full</div>
</div>
</body>
</html>
Conclusion
Tailwind CSS makes it easy to add rounded corners to your website’s elements. With its comprehensive range of border radius classes, you can quickly and easily customize the roundness of your elements to achieve your desired look and feel.
Experiment with different classes to find the perfect Tailwind border radius for your website.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
1
