By default, form fields such as input, textarea or checkboxes of an online form are displayed with rectangular edges and a narrow frame width. Such a standard form can be seen below as an example.

Form fields with rounded corners appears somewhat more modern and interesting, especially when displayed on mobile devices. The fact that this design feature is used frequently can already be seen on many Internet forms.
Online form field adjust frame radius
You can easily configure the rounded corners with the CSS property border-radius. The following code examples show the direct application to a input field of type text.
You can specify the setting for the frame radius directly for each form field individually, as in the code example below:
<input type="text" name="surname" id="surname" style="border-radius: 5px;"/>
But you can also include it as CSS style either in your own CSS file or in the header of the HTML file:
<head>
<style type="text/css">
input, textarea {
border-radius:5px;
}
</style>
</head>
<body>
<form action="send.html" id="contact">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname"/><br>
<label for="surname">Last Name</label>
<input type="text" name="surname" id="surname" /><br>
<button type="reset">Reset</button>
<button type="submit">Send</button>
</form>
Another way to include the CSS is to create a separate CSS class. So you can define different CSS classes and design properties for different form fields.
<head>
<style type="text/css">
.myborders {
border-radius:5px;
}
</style>
</head>
<body>
<form action="send.html" id="contact">
<label for="firstname">First Name</label>
<input class="myborders" type="text" name="firstname" id="firstname"/><br>
<label for="surname">Last Name</label>
<input type="text" name="surname" id="surname" /><br>
<button type="reset">Reset</button>
<button type="submit">Send</button>
</form>
HTML form field Remove frame radius
Well, actually, it’s trivial: If you want to have square edges again, just set the CSS property border-radius:0px or remove this property completely.
change radius of form fields in the form editor
This is of course one of many features that can be configured on such a web form. If you want to do it all by hand, you have all the freedom you need, but it can also take a lot of time. If you create the online form with a suitable editor, you can configure the radius of the frame with one click.
