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;

Photoshop Tutorials

The best photoshop image manipulation tutorial available here with step by step.