border-image do not change width

Is there any way I can make the border image to appear on hover so that it doesn’t change the width of element?

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg1:hover { 
box-sizing: border-box;
    border: 30px solid transparent;
    -webkit-border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round; /* Safari 3.1-5 */
    -o-border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round; /* Opera 11-12.1 */
    border-image: url(https://cdn2.hubspot.net/hubfs/463211/b2c/ezragic.png) 25 round;
}
</style>
</head>
<body>

<p>The border-image property specifies an image to be used as the border around an element:</p>
<p id="borderimg1">hover me!</p>
</body>
</html>


Set the border on an absolutely positioned pseudo element: