Now that Facebook has joined the move to having rounded edges in text input boxes, I want to do that too! I can get to the raw HTML on my pages, what do I need to change for this to happen?
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:
Search Twitter:
<input type=”text” name=”q” />
<input type=”submit” />
</form>
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:
Search Twitter:
<input type=”text” name=”q” style=”border-radius:5px” />
<input type=”submit” />
</form>
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.