How to Make a Small Circle's Border Smooth

How can I make a small circle's border smooth?

Use box-shadow CSS property for this issue.

Please see the next example: http://jsfiddle.net/RJMWR/

Is it possible to make small circles via CSS?

Have a look at this library:
http://jsdraw2d.jsfiction.com/

For drawing circles there are examples in http://jsdraw2d.jsfiction.com/demo/circleellipse.htm

Create a perfect circle with CSS

In order to achieve a perfectly round shape you'll need to have perfect square to begin with. So, for instance, your button will need to have dimensions like width: 32px; height: 32px. To turn a square into a circle you'll have to apply a border radius of 50% e.g. border-radius: 50%.

How to draw a smooth circle with a border in glsl?

You have to compute the absolut value of the difference between the radius and the distance and interpolate between 0.0 and borderThickness:

float t = 1.0 - smoothstep(0.0, borderThickness, abs(radius-d));

If you want to fill the circle, then you need 2 gradients. 1 for the transition between the inner circle and the border and a 2nd one for the alpha channel on the outline. mix the colors by the former and set the alpha channel by the later:

float t1 = 1.0 - smoothstep(radius-borderThickness, radius, d);
float t2 = 1.0 - smoothstep(radius, radius+borderThickness, d);
frag_colour = vec4(mix(color.rgb, baseColor.rgb, t1), t2);

How to use CSS to surround a number with a circle?

Here's a demo on JSFiddle and a snippet:

.numberCircle {    border-radius: 50%;    width: 36px;    height: 36px;    padding: 8px;
    background: #fff;    border: 2px solid #666;    color: #666;    text-align: center;
    font: 32px Arial, sans-serif;}

<div class="numberCircle">30</div>

How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

The "white space" is the background-color of your img

Just add:

background-color:#444;

It should do the trick.

Border-radius: 50% produces jagged circles; why not perfect circles?

Add this border: 0; CSS property in this #mobile-choice-buttons label, and check:)

---

Related Topics