{"id":2647,"date":"2020-03-13T12:52:20","date_gmt":"2020-03-13T11:52:20","guid":{"rendered":"https:\/\/da-software.de\/?p=2647"},"modified":"2021-06-25T18:12:16","modified_gmt":"2021-06-25T16:12:16","slug":"form-field-with-rounded-corners","status":"publish","type":"post","link":"https:\/\/da-software.net\/en\/2020\/03\/form-field-with-rounded-corners\/","title":{"rendered":"Form field with rounded corners"},"content":{"rendered":"

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

\"Screenshot
Example of a web form with rectangular edges<\/figcaption><\/figure>\n

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<\/a>.<\/p>\n

\"Screenshot
Example of an HTML form type with round corners for the form fields<\/figcaption><\/figure>
\n\"software<\/a><\/p>\n

Online form field adjust frame radius<\/h3>\n

You can easily configure the rounded corners with the CSS<\/a> property border-radius<\/strong><\/em>. The following code examples show the direct application to a input<\/em> field of type text<\/em>.<\/p>\n

You can specify the setting for the frame radius directly for each form field individually, as in the code example below:<\/p>\n

<input type=\"text\" name=\"surname\" id=\"surname\" style=\"border-radius: 5px;\"<\/span>\/><\/code><\/pre>\n
But you can also include it as CSS style either in your own CSS file or in the header of the HTML file:<\/p>\n
<head>\r\n<style type=\"text\/css\">\r\ninput, textarea {\r\n    border-radius:5px;<\/span>\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<form action=\"send.html\" id=\"contact\">\r\n<label for=\"firstname\">First Name<\/label>\r\n<input type=\"text\" name=\"firstname\" id=\"firstname\"\/><br>\r\n<label for=\"surname\">Last Name<\/label>\r\n<input type=\"text\" name=\"surname\" id=\"surname\" \/><br>\r\n<button type=\"reset\">Reset<\/button>\r\n<button type=\"submit\">Send<\/button>\r\n<\/form>\r\n<\/code><\/pre>\n
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.<\/p>\n
<head>\r\n<style type=\"text\/css\">\r\n.myborders {<\/span>\r\n    border-radius:5px;<\/span>\r\n}<\/span>\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<form action=\"send.html\" id=\"contact\">\r\n<label for=\"firstname\">First Name<\/label>\r\n<input class=\"myborders\"<\/span> type=\"text\" name=\"firstname\" id=\"firstname\"\/><br>\r\n<label for=\"surname\">Last Name<\/label>\r\n<input type=\"text\" name=\"surname\" id=\"surname\" \/><br>\r\n<button type=\"reset\">Reset<\/button>\r\n<button type=\"submit\">Send<\/button>\r\n<\/form><\/code><\/pre>\n
HTML form field Remove frame radius<\/h3>\n
Well, actually, it’s trivial: If you want to have square edges again, just set the CSS property border-radius:0px<\/u><\/em> or remove this property completely.<\/p>\n
change radius of form fields in the form editor<\/h3>\n
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<\/a> with a suitable editor, you can configure the radius of the frame with one click.<\/p>\n
\"Screenshot:
DA-FormMaker setting for rounded corners in the online form<\/figcaption><\/figure>","protected":false},"excerpt":{"rendered":"
Give your online forms an interesting, modern look by using rounded corners for the frame of the form fields. This article describes how to achieve this in no time with the CSS property “border-radius”<\/em>.<\/p>\n","protected":false},"author":2,"featured_media":667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[20],"tags":[173,172,111,125,174,114,127],"class_list":["post-2647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","tag-border-en","tag-css-en","tag-internet-form","tag-online-form","tag-radius-en","tag-tutorial-en","tag-website-form"],"_links":{"self":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/2647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/comments?post=2647"}],"version-history":[{"count":0,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/2647\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media\/667"}],"wp:attachment":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media?parent=2647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/categories?post=2647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/tags?post=2647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}