CSS Transparency Effect for All Browsers

Another interesting property of CSS or Cascading Style Sheets is transparency. Like the border radius property, which you can see on my post about CSS rounded corners with no images, this is treated differently in all browsers. It will take a four statements to completely make transparency effect in all browsers. But you don't have to worry on this statements because they will not interfere with each other. Below is the CSS statements for a class to make a 50% transparency effect.

.transparent_class {
    opacity: 0.5; /* standard CSS */
    filter:alpha(opacity=50); /* Internet Explorer */
    -moz-opacity:0.5; /* Mozilla Firefox */
    -khtml-opacity: 0.5; /* Safari */
}

CSS Rounded Corners With No Images

Rounded corners in CSS today is now possible without using images with the border-radius property.

This can be done by the following CSS code in Mozilla Firefox, Opera, Safari, Google Chrome, iCab and Konqueror.

.rounded-corners {

    border-radius: 20px; /* CSS 3 */
    -o-border-radius: 20px; /* Opera */
    -icab-border-radius: 20px; /* iCab */
    -khtml-border-radius: 20px; /* Konqueror */
    -moz-border-radius: 20px; /* Mozilla Firefox */
    -webkit-border-radius: 20px; /* Safari */

}

But this method does not have the same implementaion in different browsers and not all browsers support this property most especially internet explorer. Even IE8 does not support border radius. But this does not mean that it is not possible to have rounded corners in IE.

I tried googling about css rounded corners for internet explorer, and find this HTML REMIX CSS Curved corner (border-radius) cross browser. They had a detailed instruction and demo on how to make rounded corners possible in all browsers including IE6, IE7 and IE8. They also provide updates so I believe you can easily do this on your own. Just follow the easy steps they provide and you can now possibly made a cross browser rounded corners with no images used.