Menu
I have an image gallery with all images being the same size. I'm trying to add a colored rounded border around the images, however I am having some issue doing so.
For one, the border takes up the entire width of the box, when I only want it to be a bit bigger than the image it's around. Not only that, but it doesn't even cover the entire image, only forming an eclipse around some of it. I used a random image for this, but the same thing happens to all the other images.
.galleryStyle {
color: white;
width: 100%;
background: black;
}
.galleryContainer {
height: 100%;
margin: 10px;
padding: 15px;
border-radius: 100%;
background: red;
}
.galleryGrid {
display: grid;
grid-template-columns: repeat(2, 3fr);
padding: 5px;
margin: 10px;
height: 100%;
width: 60%;
}
<body class="galleryStyle">
<div class="galleryGrid">
<div class="galleryContainer">
<div>
<a href="google.com">
<img src="https://i.ytimg.com/vi/BY3PXd2zLT4/maxresdefault.jpg" alt="image1">
</a>
</div>
</div>
</div>
https://jsfiddle.net/5q9gxof4/1/
859
asked Oct 28 '25 16:10
The border-radius should be applied on the img itself.
To do so you can select any img tags within the galleryContainer div with the following selector and then apply the border radius.
.galleryContainer img {
border-radius: 50px;
}
Then you can use the border css rule to create a border around your images:
.galleryContainer img {
border-radius: 50px;
border: 10px solid red; # This create the border
}
Try this :
img {
border-radius: 50px;
border: 2px solid red;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
