Border radius (rounded corners) in Tailwind - Mini Project: Build & Apply

Create a Card with Rounded Corners Using Tailwind CSS

📖 Scenario: You are building a simple profile card for a website. The card should have a nice rounded corner style to look modern and friendly.

🎯 Goal: Build a card using Tailwind CSS that has a white background, some padding, and rounded corners using the rounded-lg class.

📋 What You'll Learn

Use a div with Tailwind classes for background color and padding

Add the Tailwind class rounded-lg to create rounded corners

Include a heading and a paragraph inside the card

Ensure the card is centered on the page

💡 Why This Matters

🌍 Real World

Rounded corners are common in modern web design to make elements look softer and more approachable.

💼 Career

Knowing how to use Tailwind CSS classes for styling is valuable for front-end developers working on user interfaces.

1

Create the HTML skeleton with a container div

Create a div with the class container mx-auto p-4 to center content and add padding.

Tailwind

Need a hint?

The container class centers content, mx-auto centers horizontally, and p-4 adds padding.

2

Add a card div with background and padding

Inside the container div, add a div with classes bg-white p-6 to create a white background and padding for the card.

Tailwind

Need a hint?

The bg-white class sets the background color to white, and p-6 adds padding inside the card.

3

Add the rounded corners using Tailwind

Add the Tailwind class rounded-lg to the card div to give it large rounded corners.

Tailwind

Need a hint?

The rounded-lg class adds smooth, large rounded corners to the element.

4

Add heading and paragraph inside the card

Inside the card div with rounded-lg, add an h2 with text Profile Card and a p with text This card has rounded corners using Tailwind CSS..

Tailwind

Need a hint?

Use semantic tags h2 and p inside the card div.