How to Create a Rounded Card in Tailwind CSS ?

Last Updated : 11 Mar, 2024

A rounded card is a design used in web development, featuring rounded corners and typically containing content or information within a defined boundary. To create a rounded card in Tailwind CSS, use the rounded utility class along with the bg-white and shadow-md classes for a clean, rounded look.

Syntax:

<div class="rounded bg-white shadow-md p-4">
  <!-- Your card content here -->
</div>

Rounded Classes

Class	Description
rounded-none	No rounded corners.
rounded-sm	Small rounded corners.
rounded	Medium rounded corners.
rounded-md	Medium rounded corners (same as `rounded`).
rounded-lg	Large rounded corners.
rounded-xl	Extra-large rounded corners.
rounded-2xl	Extra-extra-large rounded corners.
rounded-3xl	Extra-extra-extra-large rounded corners.
rounded-full	Fully rounded corners, creating a circle if applied to a square element (e.g., a button).
rounded-t	Only the top corners are rounded.
rounded-r	Only the right corners are rounded.
rounded-b	Only the bottom corners are rounded.
rounded-l	Only the left corners are rounded.
rounded-tl	Only the top-left corner is rounded.
rounded-tr	Only the top-right corner is rounded.
rounded-br	Only the bottom-right corner is rounded.
rounded-bl	Only the bottom-left corner is rounded.

Example 1: Implementation to design different types of rounded cards.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Rounded Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="text-center mx-4 space-y-4">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <div class="mx-24 bg-green-400 
                text-justify px-12 rounded-full">
        <h3 class="text-2xl text-center">
              Full Rounded Corners
          </h3>
        <ul class="list-disc">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </div>
    <div class="mx-24 bg-green-400 
                text-justify px-8 rounded-t-lg">
        <h3 class="text-2xl text-center">
              Top Rounded Corners
          </h3>
        <ul class="list-disc">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </div>
    <div class="mx-24 bg-green-400 
                text-justify px-8 rounded-r-lg">
        <h3 class="text-2xl text-center">
              Right Rounded Corners
          </h3>
        <ul class="list-disc">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </div>
    <div class="mx-24 bg-green-400 
                text-justify px-8 rounded-b-lg">
        <h3 class="text-2xl text-center">
              Bottom Rounded Corners
          </h3>
        <ul class="list-disc">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </div>
    <div class="mx-24 bg-green-400 
                text-justify px-8 rounded-l-lg">
        <h3 class="text-2xl text-center">
              Left Rounded Corners
          </h3>
        <ul class="list-disc">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </div>
</body>

</html>

Output:

Screenshot-2024-02-29-102737

Example 2: Implementation to design rounded card with hover effect.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Rounded Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="text-center mx-4 space-y-4">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <div class="mx-24 bg-green-400 text-justify 
                px-14 rounded hover:rounded-full">
        <h3 class="text-2xl text-center">
              Rounded Corners with hover Effect
          </h3>
        <ul class="list-disc">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </div>
</body>

</html>

Output:

rtg

How to Create Tailwind CSS Profile Card in React?

pritamvinodfulari

Improve

Article Tags :

How to Create a Rounded Card in Tailwind CSS ?

Syntax:

Rounded Classes

Similar Reads

Thank You!

What kind of Experience do you want to share?