Libgdx draws a smooth ring on the fly

Question

I need to draw a ring on the fly. However, in practice, I use ShapeRenderer to draw such a small ring whose radius is 32px and border width is 1px, its result is ugly. Compared with browser render result, I give screenshots.

css:

libgdx:

1. How to draw ring on the fly like using CSS. (Prepare ring textures with vary sizes, but it is against my original intend).
2. How to draw ring with a specific line width like using HTML5 canvas.

.numberCircle {
    border-radius: 50%;
     /* behavior: url(PIE.htc);  remove if you don't care about IE8 */

    width: 16px;
    height: 16px;
    /*padding: 8px;*/
    line-height: 16px;
    
    background: #fff;
    border: 1px solid #666;
    color: #666;
    text-align: center;
    
    font: 8px Arial, sans-serif;
}

<div class="numberCircle">0</div>
<div class="numberCircle">1</div>

Answer 1

What you probably want is to enable antialiasing, it's enabled when you initialize your application. Taken from this answer:

Enable anti-alising in the configuration:

For Desktop:

LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
config.samples = 2;
new LwjglApplication(new MyGdxGame(Helper.arrayList(arg)), config);

For Android:

AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();
config.numSamples = 2;
initialize(new MyGdxGame(null), config);

You might also need to add these lines inside of the application:

Gdx.gl.glEnable(GL10.GL_LINE_SMOOTH);
Gdx.gl.glEnable(GL10.GL_POINT_SMOOTH);