DEV Community

Nic
Nic

Posted on

Card with an image and rounded borders

If you have a card with an image at the top and text at the bottom, and it has a border with rounded corners, the image's corners don't also round. I found various ways round fixing this, but then it turned out the answer was obvious.

Card setup

Here's the basic set up for the card:



<div class="card one">
  <img src="https://placekitten.com/200/200" alt="Kitten">
  <p>Some card text here</p>  
</div>


Enter fullscreen mode Exit fullscreen mode

It comes with a cute kitten photo...



.card {
  border: 3px solid red;
  border-radius: 0.5em;
}


Enter fullscreen mode Exit fullscreen mode

I made the border big and red so it's obvious. You can see the the corners of the image are over the border:
Image over border

The solution



.card {
  overflow: hidden;
}


Enter fullscreen mode Exit fullscreen mode

Image with rounded edges

One line is all that's needed. It's obvious, in retrospect. overflow: hidden means that anything outside the edge of the card should be hidden. The edge of the card starts on the inside of the border. So it therefore cuts off the corners of the image to fit the border.

Top comments (4)

Collapse
 
fredysandoval profile image
Fredy Sandoval

Nice post, you should consider adding a question for SEO, like "how to add round borders to an image?" Imagine yourself on the internet with that problem, what words would you use to find this post?

Collapse
 
nicm42 profile image
Nic

Thanks, but I'm fine with not having SEO on this blog.

Collapse
 
sameerahmed123 profile image
sameer-ahmed123

as your bio says , you do infact like red

Collapse
 
nicm42 profile image
Nic

I do indeed!