Moving Point around HTML Form in the Border

Written by @kerixa 6 March 2021

In all sites, forms elements are used to enter different parts of the site or to register information and send a request. For this reason, using forms with beautiful styles makes visitors more attracted. One of these styles is putting a moving point in the border of the forms and making them more attractive. See the code below and enjoy.

Code Snippet:

                                                <!-- this script is provided by coded by: Kerixa Inc. -->
/* css base : reset */
/* get negative value of a css variable : */
:root {
    --elemSize: 5px;

body {
    width: 100%;
    height: 100%;

body {
    font-family: Tahoma;
    background: #d1d5da;
    display: flex;
    justify-content: center;
    align-items: center;

.container {
    background: #f6f8fa;
    padding: 2rem;
    border: var(--elemSize) solid #e1e4e8;
    position: relative;

.container::before {
	content: '';
	width: var(--elemSize);
	height: var(--elemSize);
	background: white;
	position: absolute;
	/* negative value */
	top: calc(-1 * var(--elemSize));
	left: calc(-1 * var(--elemSize));
	animation: borderAnime 5s infinite;

@keyframes borderAnime {
    0% {
        top: calc(-1 * var(--elemSize));
        left: calc(-1 * var(--elemSize))

    25% {
        top: calc(-1 * var(--elemSize));
        left: 100%

    50% {
        top: 100%;
        left: 100%

    75% {
        top: 100%;
        left: calc(-1 * var(--elemSize))

.container h1 {
    font-size: 1.75rem;
    margin-bottom: 2rem;

.container a {
    display: inline-block;
    background: #0366d6;
    color: white;
    text-decoration: none;
    letter-spacing: 0.05rem;
    padding: 1rem 3rem;
<link rel="stylesheet" href="">
<div class="container">
  <h1>New books out now!</h1>
  <a href="">Read the book now</a>
<a target='_blank' href='' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!



Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

Online Users: 12
Recent Members: carfaoui, Ali7hry, alexnicola, Adam20, Prashanthcs11
advertisement 2