Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

While my code does pass the tests, I’m wondering how to make the image take on the rounded corners of its parent element.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='styles.css' rel='stylesheet'/>
    <title>Blog Post Card</title>
</head>
<body>
    <div class='blog-post-card'>
        <img class='post-img' src='https://cdn.pixabay.com/photo/2019/03/20/13/57/flowers-4068522_960_720.jpg' alt='a purple flower bouquet'/>
            <div class= 'post-content'>
                <h2 class='post-title'>Elisa and Wayne's Wedding<h2>
                <p class='post-excerpt'>Come celebrate with us on November 14th, 2025!</p>
                <a class='read-more'>Read More</a>
            </div>
    </div>
    
</body>
</html>

/* file: styles.css */
.blog-post-card {
  background: white;
  border-radius: 30px;
  box-shadow: 5px 10px 10px grey;
  width: auto;
  height: auto;
  text-align: center;
  margin: 100px;
  background-position: center;
}

.post-img {
  background-size: cover;
  border-bottom: 2px solid #191970;
  max-width: 100%;
  max-height: 100%;
}

.post-content {
  text-align: center;
  font-family: arial;
  padding: 50px;
}

.post-title {
  color: #191970
}

.post-excerpt {
  color: #5A5FCC;
}

.read-more {
  background: #191970;
  color: #DFE0F9;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  display: inline-block;
}

.read-more:hover {
  background: #0A0C34;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

Hi @Lellia !

Welcome to the forum!

When I googled this phrase

This stackoverflow answer popped up

Read through the suggestions because the top two answers will give you the desired result

3

If you want the rounded corners to only apply to the top left and right, then you can specify that using those two properties

1 Like
4

Thank you! This result didn’t show up for me when I searched!

1 Like