Question 287022 in Html Question posted in
Some basic documentation can be found here.

Html – Border-radius 50% creating an unintended border

In HTML and CSS, I need to create perfect circle img elements, where the src is set to various logos. The issue arises when I apply a 50% border-radius,parts of each logo get blocked out circularly as if there were a thick border set.

In the provided image, it can be seen I’ve set the following properties: nothing works.

border-style: none;
border-width: 0;
outline-style: none;
outline-width: 0;
overflow: visible;

(thought that last one would work for sure)

code and result

Tags:

2

Answers


  1. 0

    For perfect circles with images, applying a border-radius often crops parts of the image. Instead, you can try using the object-fit property along with object-position to maintain the logo’s visibility within the circle. For instance:

    img {
  width: 100px; /* Adjust size as needed */
  height: 100px; /* Adjust size as needed */
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

    This should help in displaying the logos within perfect circles without cropping.

    Login or Signup to reply.
  2. 0

    you can try add the image tag inside a div with equal width and height and also the 50% border radius. It will defenitely help you to fit a image inside a perfect circle

    example:-

          <div class="circular-container">
        <img src="image-url">
      </div>

    .circular-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}

.circular-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search