An Interest In:
Web News this Week
- March 6, 2024
- March 5, 2024
- March 4, 2024
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
September 25, 2022 08:09 am GMT
Original Link: https://dev.to/nicm42/card-with-an-image-and-rounded-borders-519j
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>
It comes with a cute kitten photo...
.card { border: 3px solid red; border-radius: 0.5em;}
I made the border big and red so it's obvious. You can see the the corners of the image are over the border:
The solution
.card { overflow: hidden;}
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.
Original Link: https://dev.to/nicm42/card-with-an-image-and-rounded-borders-519j
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To