How to create a glowing border around an input field with CSS?

Spread the love

Sometimes, we want to create a glowing border around an input field with CSS.

In this article, we’ll look at how to create a glowing border around an input field with CSS.

How to create a glowing border around an input field with CSS?

To create a glowing border around an input field with CSS, we set the box-shadow property.

For instance, we write

input {
  border: 1px solid #4195fc;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  -webkit-box-shadow: 0px 0px 4px #4195fc;
  -moz-box-shadow: 0px 0px 4px #4195fc;
  box-shadow: 0px 0px 4px #4195fc;
}

to set the box-shadow property to the shadow to add the glow effect.

We make the corners rounded by setting the border-radius.

Conclusion

To create a glowing border around an input field with CSS, we set the box-shadow property.

Leave a Reply

Your email address will not be published.