CSS 3 still become a recommendation in but today you can use some its features that run in almost modern browser today. These features including round corner or border radius and also box shadow
Border radius will allow you to create a rounded corner of your rectangle. Before this supported in CSS, if we want to make a round corner, we have to use couple of images and do some tweak here and there. To create a round rectangle in CSS, all you need to do is to put number of pixel in the border radius. The bigger the number, the bigger round you will get. Here’s the sample of the code
And this is the result of that code
This feature now works on Firefox, Safari, Google Chrome and IE9. I have tried in IE 7 and 8 but it doesn’t work. So if you still using IE before IE9, I recommend you to update your browser.
Box Shadows will allow you to create a shadow underneath an element. Before this feature supported in CSS3, if we want to create such shadows, we have to use couple of images and combine it. To create such shadow, you can use this code.
The property of box-shadow takes 4 properties, the first one is the x and Y offset and the third is the blur radius of the shadow. The higher the number, the fuzzier the shadow you will get. The last property is the color, this properti will allow you to change the shadow color, The shadow color is not always black, that’s why you can insert your color to the property.
Here is the code
/* this is the shadow part*/
-webkit-box-shadow: 5px 5px 5px #7A5DC7;
-moz-box-shadow: 5px 5px 5px #7A5DC7;
box-shadow: 5px 5px 5px #7A5DC7;
And this is the result
Go and try it, let see if these feature already supported by your browser.