Cross Browser Rounded Corner CSS Example - Border Radius

Cross Browser Rounded Corner CSS - Border Radius References:

Chrome : -webkit-border-radius:10px;
Firefox  : -moz-border-radius:10px;
Opera   : -o-border-radius:10px    or also you can use as -opera-border-radius
Safari    : -khtml-border-radius:10px;

IE 9.0+  : border-radius:10px;  (Forgive if it does not work - That Shit I bet won't Work)

You can also use other parameters in combination with 10px 0 10px 10px;


Our Latest Deployments:
Taxi In San Jose | Yellow Cab Airport Taxi

CSS rounder corner border & Gradients For All Web Browsers, Without Using Images

One thing that is quite nice is that we now have the ability to create gradients in our pages just from CSS code, and without the use of any images.

The good news is that there is web browser support for CSS gradients in Firefox, Safari, Google Chrome and Internet Explorer (Opera will most likely add it soon too). The bad news is that, for a couple of reasons, the implementation in each web browser is different from the other. In IE’s case, it’s because it’s based on their ancient approach that stems form IE 5.5. For WebKit-based web browsers (like Safari and Google Chrome), they were the first ones to suggest it, based on the approach for canvas, but this was later changed by the CSS WG, and the new syntax is now the one implemented in Firefox (and I guess this syntax will later make into WebKit-based web browsers as well).

<style>
 #gradient {
  color: #fff;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(top, #00f, #fff);
  /* For Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
 }
</style>

rounded corner border radius examples :

border:2px;
  -webkit-border-radius:15px 15px 0 0;
  -khtml-border-radius:15px 15px 0 0;
  -moz-border-radius:15px 15px 0 0;
  -o-border-radius:15px 15px 0 0;
  -ms-border-radius:15px 15px 0 0;
  border-radius:15px 15px 0 0;