How to Put a Border Around Your Form

Are you interested in adding a stylish border to your form? Understanding CSS can greatly enhance your ability to customize not only the appearance of your form but also your entire website. In this guide, we’ll provide step-by-step instructions on using CSS to implement a border around your form, empowering you to achieve the desired visual effect effortlessly.

Creating the form

To begin, you’ll need to create your form and add your fields. For the purpose of this documentation, we’re just going to create a basic contact form.

If you need any help in how to create your form, please review this documentation.

Placing a border on the form

Next, we’re going to add some CSS to our site that will place the border around the form. We’re also going to add a little padding so the form has some white space between the form and the fields.

If you’re not sure how to add CSS to your site, please check out this tutorial.

Specific forms based on form ID

form#wpforms-form-23 {
    padding: 20px;
    border-radius: 3px;
    border-width: 2px;
    border-color: #b95d52;
    border-style: double;
}

This CSS will only be applied to the form ID 23. You’ll need to change this ID to match your own form ID.

For all forms

form.wpforms-form {
    padding: 20px;
    border-radius: 3px;
    border-width: 2px;
    border-color: #b95d52;
    border-style: double;
}

We’ve set the padding to 20px which gives us some white space from the form’s container and form fields.

The border-radius is a setting that makes each corner of our border a little rounded. You can increase this number to have a more rounded form, or remove this completely to leave the border square.

The rest of the CSS defines the border’s width which sets the thickness of the border, the border’s color and then the border’s style. There are many styles to choose from and you can read more about that from W3 Schools.

By applying that CSS, our form will now have a slight highlight to it on the page.

If you would want to apply this same CSS to all of your forms, use this CSS instead.

And that’s all you need to place a border around your form! Would you like to also center your forms? Check out our tutorial on How to Center a Form.