CSS Template: Card Layout (Rounded Corners + Shadow)

📝 Use Case

This template is useful when you want to present card-style boxes such as product cards or profile sections. Great for beginners to add elegant design easily.

📘 Explanation

border-radius creates rounded corners, and box-shadow adds depth with a subtle shadow. It's a simple but highly reusable style.

✅ Demo

This is a card-style box with rounded corners and a subtle shadow.

📄 Code (Partial)

<style>
.card {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  background-color: #ffffff;
  max-width: 400px;
  margin: 1rem auto;
}
</style>

<div class="card">
  This is a card-style box.
</div>

📦 Code (Full HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Card Layout Demo</title>
  <style>
    .card {
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      padding: 1.5rem;
      background-color: #ffffff;
      max-width: 400px;
      margin: 1rem auto;
    }
  </style>
</head>
<body>
  <div class="card">
    This is a card-style box with rounded corners and a subtle shadow.
  </div>
</body>
</html>

Copied!

🎨 Card Design Variations

Here are ways to further enhance a basic card design. By adjusting the box-shadow value, you can create a more three-dimensional effect. For example, box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); provides a stronger shadow effect.

🌈 Color and Hover Effects

If you want to add color to a card, change the background-color. Additionally, by writing .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }, you can add a floating effect on mouse hover.

📱 Responsive Support

To adjust the card's width based on screen size, use width: 90%; instead of max-width. Combining with media queries like @media (min-width: 768px) { .card { width: 50%; } } allows you to create a two-column layout on desktop.

Content layout inside the card is also important. Adding display: flex; and flex-direction: column; gives you flexible control over inner elements. This is especially useful for cards with buttons or images.

This card design can be used in various scenarios such as product listings, blog post thumbnails, or dashboard widgets. Adjusting the balance between shadow and border-radius helps create a design that matches your site's overall tone and style.