Why is the border funky when a radius is applied?

Question

I was messing around in HTML when I saw this small bug

I made this button using SCSS and gave it a border radius of 5px. If you're able to notice, there's a small curve where the border raidus is supposed to be.

Close up:

Why is this happening?

Code

/* Button.scss file */

@import "../../util/variables";

button {
    background-color: white;
    color: black;
    outline: none;
    border: 1px currentColor solid;
    padding: 0.3rem 0.85rem;
    border-radius: $border-radius;

    &:hover {
        cursor: pointer;
    }

    &.primary {
        background-color: $primary;
        color: $primary-text;
    }

    &.secondary {
        background-color: $secondary;
        color: $secondary-text;
    }

    &.block {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

<!-- HTML -->

<button
    class="button"
>
    Login
</button>

EDIT:

$primary is #283593
I use firefox

button {
     background-color: white;
     color: black;
     outline: none;
     border: 1px currentColor solid;
     padding: 0.3rem 0.85rem;
     border-radius: 5px;
}
 button:hover {
     cursor: pointer;
}
 button.primary {
     background-color: #283593;
     color: white;
}
 button.block {
     display: block;
     width: 100%;
     margin-bottom: 0.5rem;
}

<button class="button primary">Login</button>

This could be dependent on the rendering engine. Which browser do you use? — Markus Zeller, Mar 19 '21 at 07:29
Firefox browser, and I'm using the svelte framework with SASS — arnu515, Mar 19 '21 at 07:35
I made you a snippet. Is it correct after applying your variables? — mplungjan, Mar 19 '21 at 07:53
Is the SNIPPET correct, I.e. what you have WITH the variables — mplungjan, Mar 21 '21 at 13:07

score 0 · Answer 1 · answered Mar 19 '21 at 07:36

0

This is an artifact caused by the imprecision of fractional numbers used in the rendering. You can expect it to vary depending on browser, and perhaps even GPU and rendering mode.

See also: Is floating point math broken?

answered Mar 19 '21 at 07:36

Brad

159,648
54
349
530

Why is the border funky when a radius is applied?

Code

1 Answers1