You Can Use Border Radius and Box Shadow in CSS3 Today

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
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

.roundBox{

	background-color:#8D38C9;
	
	-webkit-border-radius: 20px;
  	-moz-border-radius: 20px;

  	border-radius: 20px;

	height:200px;
	width:200px;

}

And this is the result of that code

round corner css tutorial

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

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

.roundBox{

	background-color:#8D38C9;
	
	-webkit-border-radius: 20px;
  	-moz-border-radius: 20px;

  	border-radius: 20px;

	height:200px;
	width:200px;

	/* 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

box shadow css tutorial

 

Go and try it, let see if these feature already supported by your browser.

Be Sociable, Share!

Related Posts:

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *