The radius of the border describes how an element's corners are rounded. It is an important design element that can have a big impact on the aesthetics and user experience of a website. By offering a series of utility classes that you can immediately add to your HTML components, Tailwind CSS streamlines the process of implementing border radius.
1. Applying a Basic Border Radius:
For applying border radius to elements, Tailwind CSS provides a clear and straightforward syntax. A specific value that controls the radius of all four is placed after the rounded utility class.
<div class="w-fit rounded-sm border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-sm</div>
<div class="w-fit rounded-md border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-md</div>
<div class="w-fit rounded-lg border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-lg</div>
<div class="w-fit rounded-xl border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-xl</div>
<div class="w-fit rounded-2xl border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-2xl</div>
This code will round all four corners of the <div> element with a moderate radius.
2. Rounded Corners by Sides:
Tailwind CSS also offers the flexibility to define distinct border radius for individual corners of an element. This feature proves especially valuable when crafting distinctive shapes and designs
<div class="flex min-h-screen items-center justify-center gap-4">
<div class="rounded-tl-lg bg-transparent border-blue-600 p-4 border-[2px]">rounded top-left</div>
<div class="rounded-b-lg bg-transparent border-blue-600 p-4 border-[2px]">rounded bottom</div>
<div class="rounded-r-lg bg-transparent border-blue-600 p-4 border-[2px]">rounded right</div>
<div class="rounded-l-lg bg-transparent border-blue-600 p-4 border-[2px]">rounded left</div>
</div>
3. Applying Border Radius to Specific Elements:
You can apply border radius to specific types of elements, such as buttons or images, to achieve a more customized and polished look.
<button class="rounded-lg bg-blue-400 p-3 text-white hover:bg-red-600">Click me!</button>
<img class="h-20 w-20 rounded-full object-cover object-left-top" src="user.jpg" alt="user" />
Note: Here you have to add the user image.
4. Custom Border Radius Values:
If you have specific border radius values in mind that aren't covered by the predefined classes, Tailwind CSS offers the flexibility to define custom values using the rounded utility.
<div class="rounded-[10px_20px_10px_15px] p-3 bg-blue-500 text-white">
Custom border radius for each corner
</div>
5. Customizing the Configuration:
If you want to customize the default border radius values or add new ones, you can modify the borderRadius section in your Tailwind CSS configuration file .
module.exports = {
theme: {
extend: {
borderRadius: {
'4xl': '44px', // Add a new border radius option
},
},
},
variants: {},
plugins: [],
<div class="rounded-tl-4xl bg-transparent border-blue-600 p-6 border-2"> border radius</div>
