Rounding Rough Edges in Html5

About Rounding Rough Edges in Html5

On the Web , everything is a rectangle by default. Form fields, tables, and even sections of web pages all have a blocky, sharp-edged look, so many designers have turned to different techniques over the years to add rounded corners to these elements to soften up the interface a bit. CSS3 has support for easily rounding corners, and Firefox and Safari

have supported this for quite a long time. Unfortunately, Internet Explorer hasn’t jumped on board yet. But we can get around that simply enough.

Softening Up a Login Form for Rounding Rough Edges in Html5

The wire frames and mock-ups you received for your current project show form fields with rounded corners. Let’s round those corners using only CSS3 first. Our goal is to create something that looks like Figure Bellow, For the login form, we’ll use some very simple Rounding Rough Edges in Html5.

<form action="/login" method="post">
<fieldset id="login">
<legend>Log in</legend>
<label for="email">Email</label>
<input id="email" type="email" name="email">
<label for="password">Password</label>
<input id="password" type="password"
name="password" value="" autocomplete="off"/>
<li><input type="submit" value="Log in"></li>
Rounding Rough Edges in Html5

Rounding Rough Edges in Html5

We’ll style the form a bit to give it a slightly better look For Rounding Rough Edges in Html5.

width: 216px;
border: none;
background-color: #ddd;
fieldset legend{
background-color: #ddd;
padding: 0 64px 0 2px;
fieldset>ol{list-style: none;
margin: 2px;
margin: 0 0 9px 0;
padding: 0;
/* Make inputs go to their own line */
fieldset input{
width: 200px;
background-color: #fff;
border: 1px solid #bbb;
width: 202px;
padding: 0;
background-color: #bbb;

These basic styles remove the bullets from the list and ensure that the input fields are all the same size. With that in place, we can apply the rounding effects to our elements.

Browser-Specific Selectors For Rounding Rough Edges in Html5

Since the CSS3 specification isn’t final, browser makers have added some features themselves and have decided to prefix their own implementations.These prefixes let browser makers introduce features early before they become part of a final specification, and since they don’t follow the actual specification, the browser makers can implement the actual specification while keeping their own implementation as well. Most of the time, the vendor-prefixed version matches the CSS specification, but occasionally you’ll encounter differences. Unfortunately for

you, that means you’ll need to declare the border radius once for each type of browser.

Falling Back to Rounding Rough Edges in Html5

You have everything working in Firefox, Safari, and Google Chrome, but you know it doesn’t work in Internet Explorer and you know it needs to, so you’ll need to implement something that gets it as close as possible to Rounding Rough Edges in Html5.

W e b developers have been rounding corners for a while now using background images and other techniques, but we’re going to keep it as simple as possible. We can detect corner radius with JavaScript and round the corners using any number of rounding techniques. For this example, we’ll use jQuery, the jQuery Corner plug-in, and a modification of the Corner plug-in that rounds text fields. Detecting Rounded Corners Support Our fallback solution looks very much like the one we used. Falling Back We’ll include the jQuery library and the plugin here to Rounding Rough Edges in Html5,

we’ll detect whether the browser supports our attribute, and if it doesn’t, we’ll activate the plug-in. In this case, we need to detect the presence of the border-radius CSS property, but we also need to check for browser-specific prefixes such as webkit and moz.

Create corner.js, and add this function for making Rounding Rough Edges in Html5:

function hasBorderRadius(){
var element = document.documentElement;
var style =;
if (style){
return typeof style.borderRadius == "string" ||
typeof style.MozBorderRadius == "string" ||
typeof style.WebkitBorderRadius == "string" ||
typeof style.KhtmlBorderRadius == "string" ;
return null ;

We can now detect whether our browser is missing support for rounded corners, so let’s write the code to do the actual rounding. Thankfully, there’s a plug-in that can get us started. jQuery Corners jQuery Corners 2 is a small plug-in that rounds corners by wrapping elements with additional div tags and styling them so that the target

element looks rounded. It doesn’t work for form fields; however, with a little imagination, we can use this plug-in and a little bit of jQuery to make it work. First, grab jQuery Corners, and link to it from your HTML page. While there, also link up your corner.js file.

<script src="jquery.corner.js" charset="utf-8" type='text/javascript'></script>
<script src="corner.js" charset="utf-8" type='text/javascript'></script>

Now we just have to write the code that actually invokes the rounding.

Our form Corners Plug-in to Rounding Rough Edges in Html5

W’ere going to write a jQuery plug-in so that we can easily apply this rounding to all of the form fields. We already talked about writing jQuery plug-ins in Section 5, Falling Back , on page 60, so I don’t need to cover that again. Instead, I’ll just walk you through the code for this plug-in, which is based in part on a solution by Tony Amoyal.

Add this to your corners.js file:

$.fn.formCorner = function(){
return this .each(function() {
var input = $( this);
var input_background = input.css( "background-color" );
var input_border = input.css( "border-color" );
input.css("border" , "none" );
var wrap_width = parseInt(input.css( "width" )) + 4;
var wrapper = input.wrap( "<div></div>" ).parent();
var border = wrapper.wrap( "<div></div>" ).parent();
wrapper.css("background-color" , input_background)
.css("padding" , "1px" );
border.css("background-color" ,input_border)
.css("width" , wrap_width + "px" )
.css('padding' , '1px' );
wrapper.corner("round 5px" );
border.corner("round 5px" );

We’re taking a jQuery object that could be an elemento ra collection of elements, and we’re wrapping it with two div tags that we then round. We first make the innermost div the same color as the background of the original input, and we turn off the border of the actual form field. Then we wrap that field with another field with its own background color, which is the color of the original input’s border color, and give it a little bit of padding. This padding is what makes the border’s outline visible. Imagine two pieces of construction paper—a green one that’s 4 inches wide and the other a red one that’s 3 inches wide. When you place the smaller one atop the larger one, you’ll see a green border around the red one. That’s how this works. Invoking the Rounding

With the plug-in and our detection library in place, we can now invoke the rounding to Rounding Rough Edges in Html5.

Rounding Rough Edges in Html5.

Rounding Rough Edges in Html5.

Add this to the corners.js file:

$("input" ).formCorner();
$("fieldset" ).corner("round 5px" );
$("legend" ).corner("round top 5px cc:#fff" );

We’re rounding the three form fields and the fieldset, and finally, we’re rounding only the top part of the legend and specifying that the cutout of the corner should use white. The plug-in uses the background color of the parent for its cutaway color, and that’s not appropriate here. If the browser has support for the border-radius property, then it runs our plug-in. If not, then it’ll use the CSS we added earlier.
A Minor Nudge
IE treats legends a little differently. W e can add in a small style fix for IE that pushes the fieldset’s legend up a bit so that it looks the same as it does in Firefox and Chrome here to Rounding Rough Edges in Html5.

<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<!--[if IE]>
fieldset legend{margin-top: -10px }

Now things look relatively similar on all of the major browsers; you can see the Internet Explorer version in Figure 8.2, on the preceding page. Rounded corners add a bit of softness to your interfaces, and it is extremely
easy to use. That said, it’s important to be consistent with your use and to not overuse this technique, just like any other aspect of design to Rounding Rough Edges in Html5.