Element with border-radius style has sawtooth

[xland]

Element with border-radius style has sawtooth

Windows 10 4k screen

#installBtn {
  border-radius: 6px;
  padding-left: 26dp;
  padding-right: 26dp;
  text-align: center;
  width: 180dp;
  height: 50dp;
  line-height: 50dp;
  background: #1890ff;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  font-size: 22dp;
}

#installBtn:hover {
  background-color: #096dd9;
}

[mikke89]

This happens when there is no anti-aliasing enabled. Exactly how to enable this depends on your backend. For example, on SDL you could do the following:

SDL_SetHint(SDL_HINT_RENDER_SCALE_QUALITY, "linear");
SDL_GL_SetAttribute(SDL_GL_MULTISAMPLEBUFFERS, 1);
SDL_GL_SetAttribute(SDL_GL_MULTISAMPLESAMPLES, 4);

which results in smooth corners:

This is already enabled in the SDL_GL2 backend and others, take a look there for more details. Be aware that there might also be driver settings that override these values.

[xland]

Thanks
It seems OpenGL2 backend doesn't enable this by default.
I try set it by these codes:

glEnable(GL_LINE_SMOOTH);
glHint(GL_LINE_SMOOTH_HINT, GL_NICEST);
glEnable(GL_POINT_SMOOTH);
glHint(GL_POINT_SMOOTH_HINT, GL_NICEST);

But it does nothing.
When I add:

glEnable(GL_POLYGON_SMOOTH);
glHint(GL_POLYGON_SMOOTH_HINT, GL_NICEST);

It works,But guide line appears:

[mikke89]

Are you developing for Windows? I think it's a bit tricky to get MSAA working there, you can't rely on OpenGL alone but need to open a window with correct settings. Alternatively, I think you can use framebuffer objects, which you will need OpenGL 3.0+ for.

See e.g. this thread for a solution: https://stackoverflow.com/questions/34907832/activating-multisample-on-opengl-win32

Another alternative is to use a windowing library like SDL or GLFW, these handle all of that complexity for you.

[xland]

Thanks
I change my backend to OpenGL3+GLFW and the sawtooth is gone.

[v-atamanenko]

I'm definitely not getting sawtooth, but antialiasing on rounded corners is still not the best. On the example picture attached: Figma on the left, RmlUi on the right. OGL3+GLFW/OGL3+SDL produce the same result. Is there no way to make it look better but implement custom AA?

[mikke89]

You can increase the number of MSAA samples for smoother results:

RmlUi/Backends/RmlUi_Renderer_GL3.cpp

Line 60 in 5f2a0b0

static constexpr int NUM_MSAA_SAMPLES = 2;

[v-atamanenko]

Thanks, that's way better