How to Add Border Radius to All Form Fields Using CSS Rule? [RESOLVED]

Get Help
,
1

Good Day,

Is there a single CSS Rule we can use to add a border radius to all form fields?

For example, we’d like to change our forms …

from this: Screenshot by Lightshot

to this: Screenshot by Lightshot

Help appreciated.

Thank you!

2

There are a couple of plugins that provide GUI options to change the form field styles, but they haven’t worked great for me. The following CSS could work, but you may need to be more specific with the CSS selectors or add “!important” to override the default styles.

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=month], input[type=week], input[type=time], input[type=number], input[type=search], input[type=url], textarea {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
1 Like
3

Thanks, DCI!

While I did not try your proposed solution, I eventually found one that works for all browsers. For details, click on the link provided below.

How to Set Borders in Gravity Forms

In short, we ended up using the following CSS Rule:

// border for form container
gform_wrapper_FORMID{
border-radius: 6px !important;
}
// border for form inputs
#gform_wrapper_FORMID input{
border-radius: 6px !important;
}
// border for form textarea
#gform_wrapper_FORMID textarea{
border-radius: 6px !important;
}
// border for form dropdowns
#gform_wrapper_FORMID select{
border-radius: 6px !important;
}

Where FORMID = Affected Gravity Form ID

End Result: Click here.

Cheers!

4

Glad to help and that you found a solution. In theory, you can also simplify your CSS into one selector statement if the FORMID and declarations are the same with the following.

// border for form container
gform_wrapper_FORMID, #gform_wrapper_FORMID input, #gform_wrapper_FORMID textarea, #gform_wrapper_FORMID select {
border-radius: 6px !important;
}
1 Like
5

Close! This is what worked: (one selector differs)

gform_wrapper_FORMID {
border-radius: 6px!important;
}
#gform_wrapper_FORMID input, #gform_wrapper_FORMID textarea, #gform_wrapper_FORMID select {
border-radius: 6px !important;
}
1 Like