Round Edges of Text Input Element in Web Form?

While support for the CSS style border-radius has been in Web browsers for years now, you’re right that the big sites are only just starting to take advantage of it. Seems like suddenly every designer wants their interface to look like it’s based on instant message or smartphone text chats with words in bubbles. Weird. I have no problems with actual corners on things, personally!

Fortunately, if you’re already reasonably familiar with the basics of HTML and how to add Cascading Style Sheet (CSS) attributes to individual elements, it’s easy to retrofit things. In fact, if you have a shared master style sheet for your Web site, you might be able to add a single line and have all your input boxes suddenly have rounded edges!

But let’s not get too far ahead of ourselves. At its most basic, HTML is <tag attribute=value>, often with a </tag> pair to denote a range but sometimes as a standalone element. For a text input element in an HTML form, as an example, that looks like this:

<input type=”text” name=”userinput”>

You need to wrap it within a form element, of course, but let’s slow down just a bit and start with the Facebook UI. As of the latest interface update, input boxes for comments now look like this:

Pretty cool if you’re a fan of the rounded edge!

To explore how to code your own form to look like that, let’s do a simple task: A Twitter search bar. It’s easy enough to do a search on Twitter — for gryffindor — and ascertain that the fully qualified search URL is

https://twitter.com/search?q=gryffindor&src=typd

As with most online site search, you can chop out the name=value variables that don’t contain the actual search term, so all we really need from this is the target URL (everything to the left of the “?”) and the name of the name=value pair that has the search itself.

That translates quickly and easily into this HTML search form you can put on any Web page:

When we have the browser interpret the HTML it looks uninspired, but it does work:

And now, finally, we can round the corners. That’d done by adding some CSS to the actual input element that produces the text input box, and revolves around border-radius. Let’s make it big and start with a reasonably subtle corner: 10 pixels, or 10px:

That formats thusly:

Let’s change that 5px to a 15px and also add a border-radius to the submit button element too and see what happens!

So there ya have it. Add style=”border:radius:25px” or similar to your own form input elements and you’ll have slick, rounded edges that’ll make all your forms look oh, so modern.

The post Round Edges of Text Input Element in Web Form? originally appeared on Ask Dave Taylor.