Prevent the Element Edge from growing when using Transform:Scale

Question

It’s a very simple question, but I couldn’t find an answer...

I have an element that has a borda of 1px. But when I make one :hover on it I apply a transform:scale() but the width of borda him tb seems to increase, until I tried to put 0.01px, but it didn’t work out.

Has some way to fix it without having to create a pseudo-element?

body {
    margin: 2rem;
}
.box {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin-right: 1rem;
transition: transform 500ms;
}
.box:hover {
    transform: scale(2) translate(25%, 25%);
border: 0.1px solid #000;
}

<div class="box"></div>

Answer 1

This is because the transform: scale(2) scale the whole object, including its edge. So that it does not happen, It is more interesting to increase your height and width, but its content will not accompany it. If you really need to use Scale, try changing the border for a box shadow because there is no pixel "broken" but strangely with box shadow works, as in the example:

body {
    margin: 2rem;
}
.box {
    float: left;
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 0px 1px #000;
    margin-right: 1rem;
    transition: box-shadow 500ms, transform 500ms;
}
.box:hover {
    transform: scale(2) translate(25%, 25%);
    box-shadow: 0px 0px 0px .55px #000;
}

<div class="box"></div>