How do I create a rounded border around my image?

user_13138206 0
Viewed 486

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/

css html
3 Answers

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
}
user_7171470

Try this :

img {
  border-radius: 50px;
  border: 2px solid red;
}
user_77184090

you can simply set border and border-radius directly to your image element like that:

img {
  border:10px solid red;
  border-radius: 10px;
}

and here is a jsfiddle link for it

user_66060900
Related