Rounded CSS border looks 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 (eg, 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

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>

Answer 4

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 5

Usually when I'm faced with this problem, I just reduce the contrast of the colors to help ease the pixelated anti-aliasing (as I mentioned in my comment). This is not always an option however. The real problem you are facing is that the browser will apply a certain amount of anti-aliasing to prevent complete jaggedness and you don't really have control over the intensity of that anti-aliasing that's applied. Here's an alternative that you can use to help take control of the appearance. You can use box-shadow to supplement or replace your existing border:

 body { background: #223; padding-bottom: 25px; text-align: center; color: white; } div { margin-top: 25px; } img { display:inline-block; border-radius: 50%; border: 1px solid white; vertical-align: middle; } div + div img { box-shadow: 0 0 1px 0 white; } div + div + div img { box-shadow: 0 0 0 1px white; border: none; }

 <div>border only: <img src="//placehold.it/50/933/FFF"></div> <div>border + box-shadow: <img src="//placehold.it/50/933/FFF"> <div>box-shadow only: <img src="//placehold.it/50/933/FFF">