How to Smoothly Change Border Width on Hover Without Layout Shift

Background

Hello, I'm Shi Xiaoshi. I recently encountered a requirement where hovering over a card should change its border from 1px to 2px and its color from gray to blue.

Hover the card, the border changes from 1px to 2px and the color changes from gray to blue.

Changing styles on hover is easy, but the resulting animation feels harsh because the inner padding changes, squeezing the content.

.work-order-card {
    padding: 8px 16px 16px 16px;
    border-radius: 8px;
    border: 1px solid #e1e5eb;
    width: 296px;
    transition: all 0.2s ease;
    &:hover {
        border: 2px solid #64A6F7;
        transition: all 0.2s ease;
    }
}

How to Solve

The core idea is to keep the central area unchanged before and after hover, regardless of border or margin changes.

Scenario 1: Border Appears From Nothing

The simplest case is when there is no border initially and a border appears on hover.

Solution: set the initial border to the same thickness as the hover border but make it transparent.

.work-order-card {
    padding: 8px 16px 16px 16px;
    border-radius: 8px;
    border: 2px solid transparent;
    width: 296px;
    transition: all 0.2s ease;
    &:hover {
        border: 2px solid #64A6F7;
        transition: all 0.2s ease;
    }
}

Scenario 2: Border Thickness Changes

When the border grows from 1px to 2px, the box's padding must be adjusted to avoid squeezing the inner elements.

Dynamic Padding

Calculate the new padding for the hover state.

.work-order-card {
    padding: 8px 16px 16px 16px;
    border-radius: 8px;
    border: 1px solid #E1E5EB;
    width: 296px;
    &:hover {
        padding: 7px 15px 15px 15px;
        border: 2px solid #64A6F7;
    }
}

Without a transition this looks acceptable, but adding transition makes the animation look abrupt.

.work-order-card {
    padding: 8px 16px 16px 16px;
    border-radius: 8px;
    border: 1px solid #E1E5EB;
    width: 296px;
    transition: all 0.2s ease;
    &:hover {
        padding: 7px 15px 15px 15px;
        border: 2px solid #64A6F7;
        transition: all 0.2s ease;
    }
}

No Padding Change – Center Core Content with Flex

If the outer box size is fixed, the best approach is to use a flex layout and keep the core area centered, so border changes never affect its position.

<div class="work-order-card">
    <div class="center-box">
</div>
</div>

.work-order-card {
    border-radius: 8px;
    border: 1px solid #E1E5EB;
    width: 296px;
    height: 214px;
    transition: all 0.2s ease;
    &:hover {
        border: 2px solid #64A6F7;
        transition: all 0.2s ease;
    }
    .center-box {
        width: 264px;
    }
}

Note: This method requires the outer box's width and height to be fixed, and the inner box's width must also be fixed.

Conclusion

To address the issue where a hover‑induced border thickness causes inner elements to be squeezed, this article offers three solutions:

Make the initial border transparent but with the same thickness as the hover border.

If the border thickness changes, either adjust padding manually (no transition) or use a flex‑centered layout for smooth transitions.

When using flex, ensure the outer container has fixed dimensions.

Feel free to share any better solutions in the comments.