CSS - Rounded border looks too pixelated

Question

I need some help to fix my rounded border. It looks so ugly. I want it more smooth, but I can't seem to fix it no matter what. I don't know what I am doing wrong.

Here is a picture of it:

Here is my HTML:

<div class="sidebar">
    <!-- User avatar/message/notification/settings buttons -->
    <div class="userpanel">
        <div class="userpanel-image">
            <img src="image.jpg">
        </div>
        <div class="userpanel-buttons">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span></a></li>
            </ul>
        </div>
    </div>
</div>

And here is my CSS:

.sidebar > .userpanel > .userpanel-image img {
    border: 1px solid white;
    border-radius: 25px;
    margin: 3px;
    margin-right: 25px;
}

Answer 1

This ultimately depends upon the pixel density of the monitor you are using.

Pixels per inch (PPI) or pixels per centimeter (PPCM) is a measurement of the pixel density (resolution) of an electronic image device, such as a computer monitor or television display, or image digitizing device such as a camera or image scanner. Horizontal and vertical density are usually the same, as most devices have square pixels, but differ on devices that have non-square pixels.

For example, a 15 inch (38 cm) display whose dimensions work out to 12 inches (30.48 cm) wide by 9 inches (22.86 cm) high, capable of a maximum 1024×768 (or XGA) pixel resolution, can display around 85 PPI in both the horizontal and vertical directions. This figure is determined by dividing the width (or height) of the display area in pixels by the width (or height) of the display area in inches. It is possible for a display to have different horizontal and vertical PPI measurements (e.g., a typical 4:3 ratio CRT monitor showing a 1280×1024 mode computer display at maximum size, which is a 5:4 ratio, not quite the same as 4:3). The apparent PPI of a monitor depends upon the screen resolution (that is, the number of pixels) and the size of the screen in use; a monitor in 800×600 mode has a lower PPI than does the same monitor in a 1024×768 or 1280×960 mode.

Monitors with a higher pixel density will tend to smooth curves much better visually.

There's really nothing you can generally do to improve the pixel density display via HTML/CSS or really, anything. You merely have to learn to live with the quality of your monitor or upgrade it.

In some cases, applying a slight 1px box-shadow the same color as your circle can assist in the monitor anti-aliasing. However, that's not 100% successful either.

Answer 2

You're definetly not doing anything wrong.

Maybe that just because the border is too thin. Try to change border: 1px solid white; to 2px, 3px, or whatever you like. Give it try.

Answer 3

For me this looks best:

.userpanel-image {  
  width: 100px;
  height: 100px;
  border-radius: 100%;
  box-shadow: 0 0 1px 1px white;
  overflow: hidden;
}

.userpanel-image img {
  width: 98px;
  height: 98px;
}

Answer 4

Unfortunately i had the same problem several times. I think this might be a render problem which cant be solved 100%. Maybe you can use the workaround i used for my "border-problem" to make it look sharper (I did not test it on every single browser so u might have to check that out)

body {background:black;}

div {
  width:100px;
  height:100px;
  display:block;
  background:#fff;
  border-radius:100%;
  padding:2px;
}

img {
  display:block;
  border-radius:100%;
  display:block;
  width:100px;
  height:100px;
}

<div>
  <img src="https://unsplash.it/100" alt=""> 
</div>