Tailwind CSS - Border Radius

Previous
Quiz
Next

Tailwind CSS Border Radius consists of predefined classes used to round the corners of elements. These classes apply different levels of rounding, ranging from no rounding to fully rounded corners.

Tailwind CSS Border Radius Classes

Below is a list of Tailwind CSS Border Radius classes and properties for rounding element corners with various options.

Class CSS Properties
rounded-none border-radius: 0px;
rounded-sm border-radius: 0.125rem; /* 2px */
rounded border-radius: 0.25rem; /* 4px */
rounded-md border-radius: 0.375rem; /* 6px */
rounded-lg border-radius: 0.5rem; /* 8px */
rounded-xl border-radius: 0.75rem; /* 12px */
rounded-2xl border-radius: 1rem; /* 16px */
rounded-3xl border-radius: 1.5rem; /* 24px */
rounded-full border-radius: 9999px;
rounded-s-none border-start-start-radius: 0px;
border-end-start-radius: 0px;
rounded-s-sm border-start-start-radius: 0.125rem; /* 2px */
border-end-start-radius: 0.125rem; /* 2px */
rounded-s border-start-start-radius: 0.25rem; /* 4px */
border-end-start-radius: 0.25rem; /* 4px */
rounded-s-md border-start-start-radius: 0.375rem; /* 6px */
border-end-start-radius: 0.375rem; /* 6px */
rounded-s-lg border-start-start-radius: 0.5rem; /* 8px */
border-end-start-radius: 0.5rem; /* 8px */
rounded-s-xl border-start-start-radius: 0.75rem; /* 12px */
border-end-start-radius: 0.75rem; /* 12px */
rounded-s-2xl border-start-start-radius: 1rem; /* 16px */
border-end-start-radius: 1rem; /* 16px */
rounded-s-3xl border-start-start-radius: 1.5rem; /* 24px */
border-end-start-radius: 1.5rem; /* 24px */
rounded-s-full border-start-start-radius: 9999px;
border-end-start-radius: 9999px;
rounded-e-none border-start-end-radius: 0px;
border-end-end-radius: 0px;
rounded-e-sm border-start-end-radius: 0.125rem; /* 2px */
border-end-end-radius: 0.125rem; /* 2px */
rounded-e border-start-end-radius: 0.25rem; /* 4px */
border-end-end-radius: 0.25rem; /* 4px */
rounded-e-md border-start-end-radius: 0.375rem; /* 6px */
border-end-end-radius: 0.375rem; /* 6px */
rounded-e-lg border-start-end-radius: 0.5rem; /* 8px */
border-end-end-radius: 0.5rem; /* 8px */
rounded-e-xl border-start-end-radius: 0.75rem; /* 12px */
border-end-end-radius: 0.75rem; /* 12px */
rounded-e-2xl border-start-end-radius: 1rem; /* 16px */
border-end-end-radius: 1rem; /* 16px */
rounded-e-3xl border-start-end-radius: 1.5rem; /* 24px */
border-end-end-radius: 1.5rem; /* 24px */
rounded-e-full border-start-end-radius: 9999px;
border-end-end-radius: 9999px;
rounded-t-none border-top-left-radius: 0px;
border-top-right-radius: 0px;
rounded-t-sm border-top-left-radius: 0.125rem; /* 2px */
border-top-right-radius: 0.125rem; /* 2px */
rounded-t border-top-left-radius: 0.25rem; /* 4px */
border-top-right-radius: 0.25rem; /* 4px */
rounded-t-md border-top-left-radius: 0.375rem; /* 6px */
border-top-right-radius: 0.375rem; /* 6px */
rounded-t-lg border-top-left-radius: 0.5rem; /* 8px */
border-top-right-radius: 0.5rem; /* 8px */
rounded-t-xl border-top-left-radius: 0.75rem; /* 12px */
border-top-right-radius: 0.75rem; /* 12px */
rounded-t-2xl border-top-left-radius: 1rem; /* 16px */
border-top-right-radius: 1rem; /* 16px */
rounded-t-3xl border-top-left-radius: 1.5rem; /* 24px */
border-top-right-radius: 1.5rem; /* 24px */
rounded-t-full border-top-left-radius: 9999px;
border-top-right-radius: 9999px;
rounded-r-none border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
rounded-r-sm border-top-right-radius: 0.125rem; /* 2px */
border-bottom-right-radius: 0.125rem; /* 2px */
rounded-r border-top-right-radius: 0.25rem; /* 4px */
border-bottom-right-radius: 0.25rem; /* 4px */
rounded-r-md border-top-right-radius: 0.375rem; /* 6px */
border-bottom-right-radius: 0.375rem; /* 6px */
rounded-r-lg border-top-right-radius: 0.5rem; /* 8px */
border-bottom-right-radius: 0.5rem; /* 8px */
rounded-r-xl border-top-right-radius: 0.75rem; /* 12px */
border-bottom-right-radius: 0.75rem; /* 12px */
rounded-r-2xl border-top-right-radius: 1rem; /* 16px */
border-bottom-right-radius: 1rem; /* 16px */
rounded-r-3xl border-top-right-radius: 1.5rem; /* 24px */
border-bottom-right-radius: 1.5rem; /* 24px */
rounded-r-full border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
rounded-b-none border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
rounded-b-sm border-bottom-right-radius: 0.125rem; /* 2px */
border-bottom-left-radius: 0.125rem; /* 2px */
rounded-b border-bottom-right-radius: 0.25rem; /* 4px */
border-bottom-left-radius: 0.25rem; /* 4px */
rounded-b-md border-bottom-right-radius: 0.375rem; /* 6px */
border-bottom-left-radius: 0.375rem; /* 6px */
rounded-b-lg border-bottom-right-radius: 0.5rem; /* 8px */
border-bottom-left-radius: 0.5rem; /* 8px */
rounded-b-xl border-bottom-right-radius: 0.75rem; /* 12px */
border-bottom-left-radius: 0.75rem; /* 12px */
rounded-b-2xl border-bottom-right-radius: 1rem; /* 16px */
border-bottom-left-radius: 1rem; /* 16px */
rounded-b-3xl border-bottom-right-radius: 1.5rem; /* 24px */
border-bottom-left-radius: 1.5rem; /* 24px */
rounded-b-full border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
rounded-l-none border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
rounded-l-sm border-top-left-radius: 0.125rem; /* 2px */
border-bottom-left-radius: 0.125rem; /* 2px */
rounded-l border-top-left-radius: 0.25rem; /* 4px */
border-bottom-left-radius: 0.25rem; /* 4px */
rounded-l-md border-top-left-radius: 0.375rem; /* 6px */
border-bottom-left-radius: 0.375rem; /* 6px */
rounded-l-lg border-top-left-radius: 0.5rem; /* 8px */
border-bottom-left-radius: 0.5rem; /* 8px */
rounded-l-xl border-top-left-radius: 0.75rem; /* 12px */
border-bottom-left-radius: 0.75rem; /* 12px */
rounded-l-2xl border-top-left-radius: 1rem; /* 16px */
border-bottom-left-radius: 1rem; /* 16px */
rounded-l-3xl border-top-left-radius: 1.5rem; /* 24px */
border-bottom-left-radius: 1.5rem; /* 24px */
rounded-l-full border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
rounded-ss-none border-start-start-radius: 0px;
rounded-ss-sm border-start-start-radius: 0.125rem; /* 2px */
rounded-ss border-start-start-radius: 0.25rem; /* 4px */
rounded-ss-md border-start-start-radius: 0.375rem; /* 6px */
rounded-ss-lg border-start-start-radius: 0.5rem; /* 8px */
rounded-ss-xl border-start-start-radius: 0.75rem; /* 12px */
rounded-ss-2xl border-start-start-radius: 1rem; /* 16px */
rounded-ss-3xl border-start-start-radius: 1.5rem; /* 24px */
rounded-ss-full border-start-start-radius: 9999px;
rounded-se-none border-start-end-radius: 0px;
rounded-se-sm border-start-end-radius: 0.125rem; /* 2px */
rounded-se border-start-end-radius: 0.25rem; /* 4px */
rounded-se-md border-start-end-radius: 0.375rem; /* 6px */
rounded-se-lg border-start-end-radius: 0.5rem; /* 8px */
rounded-se-xl border-start-end-radius: 0.75rem; /* 12px */
rounded-se-2xl border-start-end-radius: 1rem; /* 16px */
rounded-se-3xl border-start-end-radius: 1.5rem; /* 24px */
rounded-se-full border-start-end-radius: 9999px;
rounded-ee-none border-end-end-radius: 0px;
rounded-ee-sm border-end-end-radius: 0.125rem; /* 2px */
rounded-ee border-end-end-radius: 0.25rem; /* 4px */
rounded-ee-md border-end-end-radius: 0.375rem; /* 6px */
rounded-ee-lg border-end-end-radius: 0.5rem; /* 8px */
rounded-ee-xl border-end-end-radius: 0.75rem; /* 12px */
rounded-ee-2xl border-end-end-radius: 1rem; /* 16px */
rounded-ee-3xl border-end-end-radius: 1.5rem; /* 24px */
rounded-ee-full border-end-end-radius: 9999px;
rounded-es-none border-end-start-radius: 0px;
rounded-es-sm border-end-start-radius: 0.125rem; /* 2px */
rounded-es border-end-start-radius: 0.25rem; /* 4px */
rounded-es-md border-end-start-radius: 0.375rem; /* 6px */
rounded-es-lg border-end-start-radius: 0.5rem; /* 8px */
rounded-es-xl border-end-start-radius: 0.75rem; /* 12px */
rounded-es-2xl border-end-start-radius: 1rem; /* 16px */
rounded-es-3xl border-end-start-radius: 1.5rem; /* 24px */
rounded-es-full border-end-start-radius: 9999px;
rounded-tl-none border-top-left-radius: 0px;
rounded-tl-sm border-top-left-radius: 0.125rem; /* 2px */
rounded-tl border-top-left-radius: 0.25rem; /* 4px */
rounded-tl-md border-top-left-radius: 0.375rem; /* 6px */
rounded-tl-lg border-top-left-radius: 0.5rem; /* 8px */
rounded-tl-xl border-top-left-radius: 0.75rem; /* 12px */
rounded-tl-2xl border-top-left-radius: 1rem; /* 16px */
rounded-tl-3xl border-top-left-radius: 1.5rem; /* 24px */
rounded-tl-full border-top-left-radius: 9999px;
rounded-tr-none border-top-right-radius: 0px;
rounded-tr-sm border-top-right-radius: 0.125rem; /* 2px */
rounded-tr border-top-right-radius: 0.25rem; /* 4px */
rounded-tr-md border-top-right-radius: 0.375rem; /* 6px */
rounded-tr-lg border-top-right-radius: 0.5rem; /* 8px */
rounded-tr-xl border-top-right-radius: 0.75rem; /* 12px */
rounded-tr-2xl border-top-right-radius: 1rem; /* 16px */
rounded-tr-3xl border-top-right-radius: 1.5rem; /* 24px */
rounded-tr-full border-top-right-radius: 9999px;
rounded-br-none border-bottom-right-radius: 0px;
rounded-br-sm border-bottom-right-radius: 0.125rem; /* 2px */
rounded-br border-bottom-right-radius: 0.25rem; /* 4px */
rounded-br-md border-bottom-right-radius: 0.375rem; /* 6px */
rounded-br-lg border-bottom-right-radius: 0.5rem; /* 8px */
rounded-br-xl border-bottom-right-radius: 0.75rem; /* 12px */
rounded-br-2xl border-bottom-right-radius: 1rem; /* 16px */
rounded-br-3xl border-bottom-right-radius: 1.5rem; /* 24px */
rounded-br-full border-bottom-right-radius: 9999px;
rounded-bl-none border-bottom-left-radius: 0px;
rounded-bl-sm border-bottom-left-radius: 0.125rem; /* 2px */
rounded-bl border-bottom-left-radius: 0.25rem; /* 4px */
rounded-bl-md border-bottom-left-radius: 0.375rem; /* 6px */
rounded-bl-lg border-bottom-left-radius: 0.5rem; /* 8px */
rounded-bl-xl border-bottom-left-radius: 0.75rem; /* 12px */
rounded-bl-2xl border-bottom-left-radius: 1rem; /* 16px */
rounded-bl-3xl border-bottom-left-radius: 1.5rem; /* 24px */
rounded-bl-full border-bottom-left-radius: 9999px;

Functionality Of Tailwind CSS Border Radius Classes

  • rounded-*-none: This applies no rounding, with a radius of 0px.
  • rounded-*-sm: This applies small rounding, with a radius of 0.125rem (2px).
  • rounded-*: This applies default rounding, with a radius of 0.25rem (4px).
  • rounded-*-md: This applies medium rounding, with a radius of 0.375rem (6px).
  • rounded-*-lg: This applies large rounding, with a radius of 0.5rem (8px).
  • rounded-*-xl: This applies extra-large rounding, with a radius of 0.75rem (12px).
  • rounded-*-2xl: This applies 2x extra-large rounding, with a radius of 1rem (16px).
  • rounded-*-3xl: This applies 3x extra-large rounding, with a radius of 1.5rem (24px).
  • rounded-*-full: This applies fully rounded corners, with a radius of 9999px.

Replace '*' with specific sides or corners (e.g., s, e, t, r, b, l, ss, se, ee, es, tl, tr, br, bl) where:

  • rounded-s: Rounds the corners on the start side (left).
  • rounded-e: Rounds the corners on the end side (right).
  • rounded-t: Rounds the top corners (top-left and top-right).
  • rounded-r: Rounds the right corners (top-right and bottom-right).
  • rounded-b: Rounds the bottom corners (bottom-right and bottom-left).
  • rounded-l: Rounds the left corners (top-left and bottom-left).
  • rounded-ss: Rounds the start-start corners (top-left).
  • rounded-se: Rounds the start-end corners (top-right).
  • rounded-ee: Rounds the end-end corners (bottom-right).
  • rounded-es: Rounds the end-start corners (bottom-left).
  • rounded-tl: Rounds the top-left corner.
  • rounded-tr: Rounds the top-right corner.
  • rounded-br: Rounds the bottom-right corner.
  • rounded-bl: Rounds the bottom-left corner.

Tailwind CSS Border Radius Class Examples

Below are examples of Tailwind CSS Border Radius classes that show how to round the corners of your elements with various sizes. These classes make it simple to add smooth, customized curves to your design.

Implementing Rounded Border

This example shows different Tailwind CSS Border Radius Classes and how they modify the roundness of box corners in a grid layout ranging from rounded-sm to rounded-full.

Example

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Radius
    </h2>
    <p class="text-xl font-bold mb-4">Border Radius Sizes</p>
    <div class="grid grid-cols-3 gap-4 mb-6">
        <div>
            <p class="underline font-bold">rounded-none</p> 
            <div class="w-20 h-20 bg-green-500 rounded-none"></div>
        </div>
        <div>
            <p class="underline font-bold">rounded-sm</p> 
            <div class="w-20 h-20 bg-green-300 rounded-sm"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded</p> 
            <div class="w-20 h-20 bg-green-400 rounded"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-md</p>
            <div class="w-20 h-20 bg-green-500 rounded-md"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-lg</p> 
            <div class="w-20 h-20 bg-green-600 rounded-lg"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-xl</p>
            <div class="w-20 h-20 bg-green-700 rounded-xl"></div>
            <p class="font-bold">Can be applied similarly 
            <br>for 2xl and 3xl.</p>
        </div>
        <div>
            <p class="underline font-bold">rounded-full</p> 
            <div class="w-20 h-20 bg-green-900 rounded-full"></div>
        </div>
    </div>
</body>

</html>

Setting Rounded Border on Specific Side

This example shows how to apply rounded corners to specific sides of a box using Tailwind CSS. You can target individual sides such as top-left, top-right, bottom-left, and bottom-right.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Radius
    </h2>
    <p class="text-xl font-bold mb-4">
        Rounded Corners on Specific Sides
    </p>
    <div class="grid grid-cols-2 gap-4">
        <div>
            <p class="underline font-bold">rounded-tl</p> 
            <div class="w-20 h-20 bg-blue-500 rounded-tl-md"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-tr</p> 
            <div class="w-20 h-20 bg-red-500 rounded-tr-lg"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-bl</p> 
            <div class="w-20 h-20 bg-yellow-500 rounded-bl-xl"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-br</p> 
            <div class="w-20 h-20 bg-purple-500 rounded-br-2xl"></div>
        </div>
    </div>
</body>

</html>

Rounded Border on One Side

This example shows how to apply border radius to only one side of an element using Tailwind CSS Border Radius Classes. You can round just the top, bottom, left, or right corners.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Radius  
    </h2>
    <p class="text-xl font-bold mb-4">
        Single-Side Border Radius Examples
    </p>
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div>
            <p class="underline font-bold">rounded-tl-md</p> 
            <div class="w-20 h-20 bg-blue-300 rounded-tl-md"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-tr-lg</p> 
            <div class="w-20 h-20 bg-red-300 rounded-tr-lg"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-bl-xl</p> 
            <div class="w-20 h-20 bg-green-300 rounded-bl-xl"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-br-2xl</p> 
            <div class="w-20 h-20 bg-yellow-300 rounded-br-2xl"></div>
        </div>
    </div>
</body>

</html>

Multiple Rounded Border Sides

This example shows how to combine different border radius classes. By using multiple radius classes together, you can mix and match different radius values for a unique design and apply different rounding styles to different corners of an element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Radius
    </h2>
    <p class="text-xl font-bold mb-2">
        Combining Different Border Radius Sizes
    </p>
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div>
            <p class="underline font-bold">rounded-tl-lg rounded-br-xl</p> 
            <div class="w-20 h-20 bg-cyan-300 rounded-tl-lg rounded-br-xl"></div>
        </div>
        
        <div>
            <p class="underline font-bold">rounded-tr-md rounded-bl-lg</p> 
            <div class="w-20 h-20 bg-orange-300 rounded-tr-md rounded-bl-lg"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-t-md rounded-b-xl</p> 
            <div class="w-20 h-20 bg-teal-300 rounded-t-md rounded-b-xl"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-tl-xl rounded-br-md</p> 
            <div class="w-20 h-20 bg-purple-300 rounded-tl-xl rounded-br-md"></div>
        </div>
    </div>
</body>

</html>

Rounded Border on Input Fields

This example shows different border radius sizes applied to input fields, highlighting how different levels of roundness can impact the form field design.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Radius 
    </h2>
    <p class="text-xl font-bold mb-4">
        Different Border Radius Sizes for Form Inputs
    </p>
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div>
            <p class="underline font-bold">rounded-sm</p> 
            <input type="text" placeholder="Small Radius" 
            class="w-full p-2 border-2 border-blue-500 rounded-sm">
        </div>

        <div>
            <p class="underline font-bold">rounded-md</p> 
            <input type="text" placeholder="Medium Radius" 
            class="w-full p-2 border-2 border-blue-500 rounded-md">
        </div>

        <div>
            <p class="underline font-bold">rounded-lg</p> 
            <input type="text" placeholder="Large Radius" 
            class="w-full p-2 border-2 border-blue-500 rounded-lg">
        </div>

        <div>
            <p class="underline font-bold">rounded-xl</p> 
            <input type="text" placeholder="Extra-large Radius" 
            class="w-full p-2 border-2 border-blue-500 rounded-xl">
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next