Why is the Border Radius hiding the corners of my image?

I've never experienced this issue before, but no matter how much padding I add to the picture, the edges are still slightly covered up. Here is an example image (notice that it doesn't happen for every icon - the third one has a normal round background):

Here is some of my CSS code:

.tweet_messagebox_iconbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgb(65, 65, 65);
}

.iconrow {
    flex: 1;
    margin-left: 70px;
}

.singleicon {
    width: 20px;
    height: 20px;
    padding: 6px;
    background-color: rgb(17, 17, 32);
    border-radius: 20px;
}
<div class="tweet_messagebox_iconbox">
                <div class="iconrow">
                    <img class="singleicon" src="blabla.svg">
                    ...
                    ...

htmlcss

Answer №1

When images are clipped at the corners, it's usually due to the border-radius property on the <img> element. To fix this, apply the border-radius to the container of the image instead. For a perfect circle, set the border-radius to 50%. Some additional tweaks have been made for completeness, but they are optional and only impact the CSS styles.

Highlighted changes are indicated with /* ✢ */.

.bar {
  display: flex;
  justify-content: space-evenly; /* ✢ */
  align-items: center;
  margin-top: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(65, 65, 65);
}

.orb {
  display: inline-flex;     /* ✢ */
  justify-content: center;  /* ✢ */
  align-items: center;      /* ✢ */
  border-radius: 50%;       /* ✢ */
  background-color: rgba(13, 13, 13, 0.4);
}

.ico {
  display: inline-block; /* ✢ */
  width: 20px;
  height: 20px;
  padding: 9px           /* ✢ */
}
<nav class="bar">
  <a href="#" class="orb">
    <img class="ico" src="https://i.ibb.co/bBNQZW2/stop-1470.png">
  </a>

  <a href="#" class="orb">
    <img class="ico" src="https://i.ibb.co/Hx860HY/arrow-all-376.png">
  </a>

  <a href="#" class="orb">
    <img class="ico" src="https://i.ibb.co/JjNnNsb/javascript-155.png">
  </a>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: https://i.sstatic.net/DM8sX.png And this is how I want it to appear: https://i.sstatic.net/BXGpW.png Is there a way to achieve the ...

javascripthtmlcsslayoutbootstrap-4

Tips for aligning two separate texts depending on if they appear on the same line or not

Looking to align text B to the right when text A and B are on the same line, but automatically aligning text B to the left if it wraps to the next line due to space constraints. .text-left { float: left; /* Float to the left */ } .text-right { fl ...

htmlcss

HTML - Selecting Different Values in One Drop Down Based on Another Drop Down

When selecting "First Year" in the initial drop-down menu, the options "Sem1" and "Sem2" should be displayed in the second drop-down menu. Similarly, when choosing "Second Year" in the first drop-down menu, the choices "Sem3" and "Sem4" should appear in th ...

javascriptphpjqueryhtml

What is the best way to incorporate a range of details into a div using only jQuery, all while avoiding the use of data-

I'm struggling to find a concise way to explain this, so please bear with me. The information I'm sharing here is all just for example purposes and may sound strange. I have been working on creating a character select page where clicking on a cha ...

javascriptjqueryhtml

Unable to utilize the ng-disabled directive

Although this question may seem redundant, rest assured that I have exhausted all possible solutions. The issue lies in a disabled button using ng-disabled. I have a variable in the $scope that triggers a change in the ng-disabled attribute, but it fails t ...

htmlangularjs

Hiding a div by setting its display property to none using a button press

I have been having difficulty finding a solution to my problem despite trying multiple topics. My English skills are not the best, but I hope to explain my issue as clearly as possible. After clicking on this div, I would like to block the display and sho ...

javascriptphpjquerycss

Please complete this mandatory field. Issue detected with ImageField in Django

I encountered an error stating 'This field is required' when trying to upload an image. I am puzzled as to why this error is occurring, as my model is quite simple. Any assistance in identifying the issue would be greatly appreciated. cl ...

pythonhtmldjangodjango-modelsdjango-views

Executing a JavaScript function when an HTML page is loaded within an OBJECT Tag

I have a situation where I am loading an HTML page inside an object tag. Since the iPad does not support iFrames, I decided to use the object tag to load external HTML pages into a container. Everything is working well so far, but now I want to be able t ...

javascriptjqueryhtmlobject

obtain the image number by extracting a portion of the text

How can I extract the image number from a string using the sub-string function? I have applied the sub-string function to the property below. It returns 3 at the end in Chrome, but it does not work properly in Mozilla. Issue : After "-->", when I chec ...

javascriptjqueryhtmlcss

How can I showcase an image using Angular?

Recently, I've started working with Angular and I'm trying to display images using assets. I have a service that looks like this: const IMAGES = [ {"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"}, ...

htmlangular

Don't pay attention to the parent form tag in Bootstrap

Here is the code snippet I am working with: <div class="row"> <form id="update"> <div class="col-md-6"> <h1>Title</h1> </div> </form> <form id="insert"> <div class="col-md-6"> &l ...

htmlbootstrap-4

Monitoring user clicks using JavaScript code implemented

Currently, I am utilizing a JavaScript file to load on certain pages in order to track various events. Within this JavaScript file, there is a collection of selectors that have listeners attached to them. When these selectors are clicked, the tracking AP ...

javascripthtml

Various Mobile Devices Display Website in Unique Ways

I've been having trouble getting my website to display consistently across different phones and could use some assistance. You can view the site at www.fpphotos.store. I have set overflow-x:auto; for the table containing the images, with CSS styles de ...

htmlcss

Creating an HTML tag from Angular using TypeScript

Looking at the Angular TypeScript code below, I am trying to reference the divisions mentioned in the HTML code posted below using document.getElementById. However, the log statement results in null. Could you please advise on the correct way to reference ...

htmlangulartypescript

Arrangement of elements across rows and columns in a grid pattern

Is it possible to span a column that is equivalent to two columns in the first row and then have one column each for the second row, as shown in the screenshot? (There are two columns in the second row in this case) CSS main section { display: grid; ...

csscss-gridgrid-layout

CSS tip: Keep the bottom of the screen always visible in an overflow window

My webpage has a continuously updating element where new data is added to the bottom. I currently have 'overflow: scroll' enabled for users to manually scroll down and view this new information. However, I am looking for a way to display these up ...

cssscrolloverflow

Unusual Behavior in AngularJS: Using ng-include Triggers Full Page Reloading

An issue arises where a simple ng-include command causes the entire website to be printed recursively in a specific area of the page, ultimately crashing the browser. Even changing the path doesn't resolve the problem, suggesting that it's not ev ...

javascripthtmlangularjsangularjs-ng-include

Creating a CSS rollover effect for your logo on a WordPress website

Struggling to implement a CSS image rollover on a Wordpress header logo. The solution may be simple for you experts, but I can't find it anywhere on Stackoverflow. Could it have something to do with the position? Adding :relative or :absolute doesn&ap ...

csswordpresspositionrollover

Styling pagination using CSS and jQuery

I am looking to display 3 sections in a simple, paginated way that mimics tabs. I am trying to implement the logic where when a pagination item is clicked and has the 'active' class, it should show the corresponding block. However, I am strugglin ...

javascriptjqueryhtmlcsspagination

Resize images to perfectly fit dimensions of your choice

After conducting thorough research and experimenting with various jQuery and Javascript solutions, I was unable to find a way to dynamically scale images both horizontally and vertically to a specific size while maintaining their aspect ratio. In my parti ...

phphtmldynamicscaleaspect-ratio