In this topic,
We are going to see how to create border animation using CSS.
Actually, there are two borrowed pseudo-elements. Only the two pseudo-elements upper, left, and right borders are fixed, hover, and the height and width of the two pseudo-elements can be altered when passing. Very simple to comprehend.
First of all, create Html in the index.html file.
<div class="border-radius"> </div>
And I have add SCSS in <style>…</style> tag on index.html file.
html, body { width: 100%; height: 100%; display: flex; } :root { --borderColor: #03A9F3; } div { position: relative; width: 140px; height: 64px; margin: auto; border: 1px solid #03A9F3; cursor: pointer; } div::before, div::after { content: ""; position: absolute; width: 20px; height: 20px; transition: 0.3s ease-in-out; } div::before { top: -5px; left: -5px; border-top: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); } div::after { right: -5px; bottom: -5px; border-bottom: 1px solid var(--borderColor); border-right: 1px solid var(--borderColor); } div:hover::before, div:hover::after { width: calc(100% + 9px); height: calc(100% + 9px); }
Review the below video.
I hope you guys found something useful ??