Creating a circular meter, background color is creating problems

Question

I am trying to create a circular meter which will update according to value. the problem is there is a red border out of out circle... is there a good way to remove that... This is my fiddle

This is HTML Code:

<div class="outer">
    <div class="left-cov"></div>
    <div class="right-cov"></div>
    <div class="inner">
        <p class="fy-rate">1.5</p>
    </div>
</div>

following is CSS code for this:

* {
    float:left;
    margin:0px;
    padding:0px;
}
.outer {
    border-radius:50%;
    background-color:red;
    width:220px;
    height:220px;
    position:relative;
    margin:20px;
    overflow:hidden
}
.inner {
    border-radius: 50%;
    background-color:yellow;
    width:180px;
    height:180px;
    position:relative;
    top:20px;
    left:20px;
}
.left-cov {
    height:100%;
    width:50%;
    position:absolute;
    top:0px;
    left:0px;
    background-color:grey
}
.right-cov {
    height:100%;
    width:50%;
    background-color:grey;
    position:absolute;
    bottom:0px;
    right:0px;
}
.fy-rate {
    font-size:52px;
    width:100%;
    text-align:center;
    margin-top:45px;
}

Hi, look for **border-radius background bleed** over the net for your answer : https://www.google.ca/search?num=100&newwindow=1&site=&source=hp&q=border-radius+bleed There are some Stackoverflow questions about this situation : http://stackoverflow.com/search?q=border-radius+bleed — Milche Patern, Apr 23 '13 at 13:19

score 1 · Answer 1 · answered Apr 23 '13 at 13:24

I think it's an anti-aliasing problem.

The only thing you can do is either adding a box-shadow for slight improvement:

.left-cov {
  ...
  box-shadow: -1px -1px 0 gray;
}

(JS-Fiddle: http://jsfiddle.net/aAeSk/2/)

or do it in a HTML5 canvas with more design control possibilities.

score 0 · Answer 2 · edited May 23 '17 at 12:12

Copy pasted from this answer : Border Radius = Background Bleed by user mingos, answered Dec 9 '10 at 18:10 :

It's not what you're waiting for, I know, but I have to say this: use an image. This is not only due to the possibility to eliminate the bleed on all browsers. Your bleed problem on Firefox is nothing compared to how Chrome mercilessly slaughters the look of your buttons... Check it and start crying :(.-moz-background-clip: padding; ...

Creating a circular meter, background color is creating problems

2 Answers2