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>
#borderimg1:hover { 
box-sizing: border-box;
    border: 30px solid transparent;
    -webkit-border-image: url( 25 round; /* Safari 3.1-5 */
    -o-border-image: url( 25 round; /* Opera 11-12.1 */
    border-image: url( 25 round;

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

Set the border on an absolutely positioned pseudo element: