Our team is working on a UI facelift for an intranet application that helps drive our internal yearly budgetary process. During the beginning stages of the development of this effort we hired a new webmaster and we invited him to the effort to help give our UI a nice finish with all the CSS goodness and jQuery goodies.

During this process our webmaster began using some CSS3 magic to make things look nice. As most good webmasters and designers firefox was used as the start of the design. For our intranet however, IE is king and we have a mix of IE7 - 8 and they don’t support many CSS3 features. Our webmaster turned to CSS3Pie. I had no idea about this little gem and he had just recently come across it. Download it, write your CSS3 and apply PIE and magically Internet Explorer renders CSS3.

As an example of what it can do, what if you wanted to apply a nice rounded edge to an element. Fire up VS 2010 and start a new web forms project. Let’s round the edges of the bottom of the border in the default page.

We’ve added three items. The W3C standard for adding a rounded border is border-radius but for backwards compatibility we add the –moz-border-radius for older versions of Firefox and –webkit-border-radius for older versions of Chrome.

Now fire these up in Firefox and Chrome and you will have your rounded corner. If you are using IE however, no luck.

Firefox sample:

Now to make this magic happen in IE we sprinkle in just a dash of CSS3Pie. After downloading CSS3 Pie add the .htc file to your project and then add the below line to your page element in the site.css file:

Normally forms don’t have much of a visual queue to the end user showing them where they are on a page.

Wouldn’t it be nice though?

That just seems like a step in the right direction. Making this happen is a lot easier than I thought. Most browsers can handle this with the css pseudo-class selector. The css to make this happen for all your inputs would look like this:

I have done all my targeting with the input element. You can just as easily have done this with classes for your elements. In my case, the application is already well underway and it seemed an easier approach to select the input types I wanted. You could also add your textareas easily this way.