CSS card design #2 (bottom box shadow)

Here’s how to create another simple responsive HTML CSS card design example with a border and a box shadow.

Final Output:

Card Title

This is a basic HTML CSS card example with bottom black box-shadow.

1. Add a div with a class card. Add your image, title, description, and button using the following HTML structure.

<div class="card">
    <img src="..." alt="">
    <div class="card-body">
        <h2>Card Title</h2>
        <p>This is a basic HTML CSS card example with bottom black box-shadow.</p>
        <button>Know More</button>
    </div>
</div>

Set some max-width for the card and image.

.card{
  max-width: 17em;
}
img {
  max-width: 100%;
}

Output:

Card Title

This is a basic HTML CSS card example with bottom black box-shadow.

2. Add border and border radius for the card and the image.

.card {
  border: 2px solid black;
  border-radius: 1em;
}
.card img {
  border-radius: 0.9em 0.9em 0 0;
  border-bottom: 2px solid black;
}

Add some padding to the card-body.

.card-body {
  padding: 0 1em 1em;
}

Output:

Card Title

This is a basic HTML CSS card example with bottom black box-shadow.

3. Now, let’s style the button.

button {
  padding: 0.8em 1.5em;
  border: 2px solid black;
  border-radius: 1.5em;
  background-color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

Add some letter spacing to the card div as well. Also, change the font family.

.card {
  letter-spacing: 1px;
  font-family: Arial, Helvetica, sans-serif;
}

Output:

Card Title

This is a basic HTML CSS card example with bottom black box-shadow.

4. Lastly, let’s add a box shadow for the card and the button.

.card {
  box-shadow: 0 4px;
}
.card button {
  box-shadow: 0 2px;
}

Output:

Card Title

This is a basic HTML CSS card example with bottom black box-shadow.

Final Output Code for Card using HTML and CSS:

HTML:

<div class="card">
    <img src="..." alt="">
    <div class="card-body">
        <h2>Card Title</h2>
        <p>This is a basic HTML CSS card example with bottom black box-shadow.</p>
        <button>Know More</button>
    </div>
</div>

CSS:

.card {
  max-width: 17em;
  border: 2px solid black;
  border-radius: 1em;
  letter-spacing: 1px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 4px;
}

.card img {
  max-width: 100%;
  border-radius: 0.9em 0.9em 0 0;
  border-bottom: 2px solid black;
}
.card-body {
  padding: 0 1em 1em;
}
button {
  padding: 0.8em 1.5em;
  border: 2px solid black;
  border-radius: 1.5em;
  background-color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  box-shadow: 0 2px;
}