Effect of increasing and decreasing edge size

Question

I found on a website an example of a field only increasing the edge, follows the GIF below:

1. I would like to know if I can also increase, decrease the border size of an html element in the call of the same event?
2. It would be possible to perform this effect (expand/decrease) the px of the edge when loading the screen without there being any linked event in the element, for example, a certain input when loading the screen is expanding and decreasing the border in an endless constant effect.

Answer 1

I’m not sure I understand what you want, but instead of using border you can use the box-shadow with values such as spread-radius and inset to make these effects. Pro .btn just use a transition along :hover, pro input you need to make a @keyframes alternate to stay pulsing.

OBS: In the .btn I put an "edge" of each color, for you to see that one grows inward inset, and one out:

.btn {
    box-sizing: border-box;
    padding: 1em;
    background-color: black;
    color: #fff;
    font-family: sans-serif;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px red,
                      0 0 0 1px blue;
    transition: box-shadow 500ms linear;
}
.btn:hover {
    box-shadow: inset 0 0 0 4px red,
                      0 0 0 4px blue;
}

.glow {
    border: 0;
    box-shadow: 0 0 0 0 red;
    animation: glow-box 1s linear infinite alternate;
}
@keyframes glow-box {
    to {
        box-shadow: 0 0 0 5px red;
    }
}

<br>

<a class="btn" href="#">
    <span>Meu BTN</span>
</a>

<br><br><br>

<input class="glow" type="text">

Here’s the full Mozilla documentation on the box-shadow, should interest you: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

This question about multiple edges on an element may interest you: How to have more than one Edge in an Element with CSS