UiCheckbox border-radius doesn't hide overflow

[hyvyys]

On background other than white it doesn't look too good.

[hyvyys]

.ui-checkbox__checkmark {
  border-radius: $ui-default-border-radius;
  overflow: hidden;
  &::before {
    border-radius: 0 !important;
  }
}

fixes it, I think. Setting any border-radius to ::before causes an artifact.

[JosephusPaye]

The artifact is actually the white background from the .ui-checkbox__checkbox div. ::before is rounded with the border radius, but the div itself isn't.

Can be fixed without overriding the border-radius by:

.ui-checkbox__checkmark {
    border-radius: 0.125rem;
}

PR welcome 🙂

[hyvyys]

Actually when both elements have the same border-radius, I think there still appears an artifact on their edges — a jagged edge where the browser overlays their antialiased semitransparent pixels.

[JosephusPaye]

Can't seem to reproduce, this is what I see in Chrome on Linux:

This is with the browser zoomed in to 250%. At normal zoom it's practically impossible to see.

What browser are you using?

Try adding overflow: hidden as well to .ui-checkbox__checkmark to see if it helps.