CODEWITHSUNDEEP
htmlcss
w3razzz
w3razzz

Reputation: 49

How do I create a rounded border around my image?

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/

Upvotes: 4

Views: 6088

Answers (3)

felixyadomi
felixyadomi

Reputation: 3396

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
}

Upvotes: 4

Muho
Muho

Reputation: 3536

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

Upvotes: 2

Pkchkchiseu
Pkchkchiseu

Reputation: 283

Try this :

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

Upvotes: 2

Related Questions