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 se…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Nic

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:
Image over border

The solution 

.card {
  overflow: hidden;
}

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.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Nic


Print Share Comment Cite Upload Translate Updates
APA

Nic | Sciencx (2022-09-25T08:09:19+00:00) Card with an image and rounded borders. Retrieved from https://www.scien.cx/2022/09/25/card-with-an-image-and-rounded-borders/

MLA
" » Card with an image and rounded borders." Nic | Sciencx - Sunday September 25, 2022, https://www.scien.cx/2022/09/25/card-with-an-image-and-rounded-borders/
HARVARD
Nic | Sciencx Sunday September 25, 2022 » Card with an image and rounded borders., viewed ,<https://www.scien.cx/2022/09/25/card-with-an-image-and-rounded-borders/>
VANCOUVER
Nic | Sciencx - » Card with an image and rounded borders. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/25/card-with-an-image-and-rounded-borders/
CHICAGO
" » Card with an image and rounded borders." Nic | Sciencx - Accessed . https://www.scien.cx/2022/09/25/card-with-an-image-and-rounded-borders/
IEEE
" » Card with an image and rounded borders." Nic | Sciencx [Online]. Available: https://www.scien.cx/2022/09/25/card-with-an-image-and-rounded-borders/. [Accessed: ]
rf:citation
» Card with an image and rounded borders | Nic | Sciencx | https://www.scien.cx/2022/09/25/card-with-an-image-and-rounded-borders/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts