How to create card in css

CssHow-ToBeginner · 3 min read

How to Create a Card in CSS: Simple Steps and Example

To create a card in CSS, use a container with border, box-shadow, padding, and border-radius properties. These styles give the card a clean box look with some depth and spacing inside.

📐

Syntax

A basic card container uses these CSS properties:

border: adds a visible edge around the card.
box-shadow: creates a subtle shadow for depth.
padding: adds space inside the card so content doesn't touch edges.
border-radius: rounds the corners for a smooth look.

css

.card {
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 1rem;
  border-radius: 0.5rem;
}

💻

Example

This example shows a card with a title, text, and a button styled using CSS. The card has a light border, shadow, padding, and rounded corners.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Card Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .card {
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1.5rem;
    border-radius: 0.75rem;
    max-width: 300px;
    text-align: center;
  }
  .card h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
  }
  .card p {
    color: #555;
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .card button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
  }
  .card button:hover {
    background-color: #0056b3;
  }
</style>
</head>
<body>
  <div class="card" role="region" aria-label="Sample card">
    <h2>Card Title</h2>
    <p>This is a simple card created with CSS styles for border, shadow, and padding.</p>
    <button type="button">Click Me</button>
  </div>
</body>
</html>

Output

A white rectangular card centered on a light gray background with a title, descriptive text, and a blue button that changes shade on hover.

⚠️

Common Pitfalls

Common mistakes when creating cards include:

Not adding padding, which makes content touch the edges and look cramped.
Using too dark or heavy box-shadow, which can look harsh.
Forgetting border-radius, resulting in sharp corners that feel less friendly.
Not setting a background color, causing the card to blend with the page.

Always test your card on different screen sizes and backgrounds.

css

.card {
  /* Wrong: no padding, no border-radius, heavy shadow */
  border: 1px solid #ccc;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  padding: 0;
  border-radius: 0;
}

/* Corrected version */
.card {
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 1rem;
  border-radius: 0.5rem;
}

📊

Quick Reference

Use these CSS properties to build a clean card:

border: Defines the card's edge.
box-shadow: Adds subtle depth.
padding: Creates space inside the card.
border-radius: Rounds corners for smoothness.
background-color: Usually white or light for contrast.

✅

Key Takeaways

Use border, box-shadow, padding, and border-radius to style a card container.

Always add padding so content inside the card has breathing room.

Keep shadows subtle to avoid harsh looks.

Set a background color to separate the card from the page.

Test your card on different screen sizes for good responsiveness.