Libgdx draws a smooth ring on the fly - libgdx

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:
How to draw ring on the fly like using CSS. (Prepare ring textures with vary sizes, but it is against my original intend).
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);