Round Corners on Form

  • Profile Image
    ppsform
    Asked on February 03, 2014 at 07:08 PM
  • Profile Image
    jonathan
    Answered on February 03, 2014 at 08:34 PM

    Hi,

    Please use this guide 

    http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes

    at the very last sample, there is sample code how to make the input fields rounded corners.

    form-all input,select {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 140px;

    }

    Sample form http://www.jotform.com/form/13634042565?

    For detailed example, try also this thread as sample reference.

    Hope this help. Inform us if you need further help.

    Thanks.

  • Profile Image
    ppsform
    Answered on February 03, 2014 at 08:49 PM

    I was looking to round the corners on the form itself, not the input fields.

  • Profile Image
    Cesar
    Answered on February 03, 2014 at 10:10 PM

    You can achieve this using the following code:

    .form-all {
    background-color: lightgrey;
    border: 1px solid gray;
    border-radius: 15px 15px 15px 15px;
    margin-top: 20px;
    padding-bottom: 10px;
    }

    Basically the idea is the same as my colleagues we just need to apply to .form-all

    This is my example form: http://form.jotformpro.com/form/40337964690967?

    More information on Round Corners can be found here: http://www.css3.info/preview/rounded-border/

     

    Thank you.

  • Profile Image
    ppsform
    Answered on February 03, 2014 at 10:36 PM

    Perfect!  Thank you very much.