Form field with rounded corners

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.

Screenshot of a contact form with rectangular frames of the form fields
Example of a web form with rectangular edges

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.

Screenshot of an online form with rounded corners of the form fields
Example of an HTML form type with round corners for the form fields

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.

Screenshot: Set radius for round corners in the form field
DA-FormMaker setting for rounded corners in the online form

Leave a Reply

Your email address will not be published. Required fields are marked *