CSS Gradient Backgrounds for Dividers

Tweet

Until IE 9 you were not able to use gradients in IE. Only mozilla based browsers supported them.

To make gradients configure your style sheet to use these lines;

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */

The three lines I just mentioned will gradiate your background on most browsers. Try it and see what I mean.

Rounded Corners

Tweet

IE didn't recognize rounded corners prior to version 9. In the past rounded corners were only available in mozilla based browsers, such as Firefox, or Opera.

If you wanted to make rounded corners in IE, you needed to create small images, and use a complicated set of dividers to form the area you wanted to make rounded.

Today, with IE 9.x you can create rounded corners with ease. Rounded corners syntax with CCS3 is border-radius. It is easily added, such as properties are to width or position:

.roundElement {
border-radius: 10px;
}

The following statement adds one rounded corner to each of the elements four corners. A specific border element can be added to each element individually using:

.pearElement {
border-top-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 8px;
}

I like to use the shorthand notation:

.oddRoundElement {
border-radius: 12px 5px 12px 5px;
/* or */
border-radius: 12px 5px;
}

Since rounded corner elements and border-radius was not standard, each browser implemented their own prefixed {prefix}-border-radius implementation. For more information see, http://davidwalsh.name/css-rounded-corners.