Change the design of your dividers with CSS

CSS makes designing web forms so much easier. With basic coding knowledge, you can create stunning looking forms and customize its design according to your needs. With CSS you can let your imagination and creativity go wild. 123FormBuilder offers the possibility to add your own custom CSS codes on the form.

First things first, read our article about how to add dividers on the form, if you haven’t already.

Any CSS code is placed in the Edit – Themes – Add custom CSS section. We will provide you the code that needs to be pasted and show the final result. Of course, you can adjust the code by adding your own color code, adjust the border size and so on.

hr 
{
border: 3px solid rgba(137, 196, 244, 1);
   border-radius: 5px;
}

Here is the result:

 hr
{
  height: 30px; 
  border-style: solid; 
  border-color: #2074F4; 
  border-width: 2px 0 0 0; 
  border-radius: 20px; 
} 

Here is the result:

 hr {

  width: 50%;
  margin: 3em auto;
}

Edit your HTML block fields and center the headings to have the same effect. Here is the result:

Keep in mind that it is not our responsibility to fix the code once you have changed it.

Check out the CSS tricks knowledge base section for more CSS articles.