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 >
</ 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:
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 >
</ 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: