The two CSS features to make your website beautiful

The whole point of CSS is to make your website beautiful in contrast to the older websites we had before the introduction of CSS. But after the introduction of CSS3 we had a few killer features that contribute more to making your website beautiful than any other features.

These two features (strictly speaking, properties!) are box-shadow and border radius. Let's see how they work and the required syntax for specifying these properties:

• box-shadow
  

  The box-shadow property allows designers to easily implement drop shadows around elements. It is supported by all the new browsers. Here's the syntax:

  box-shadow: h-shadow v-shadow blur spread color inset;

  h-shadow specifies position of horizontal shadow and v-shadow does the same for vertical shadow. blur specifies the blur distance, spread the size of the shadow and color the color of the shadow. inset is used to get an inner shadow instead of an outer one which is the default setting. Except h-shadow and v-shadow all other properties are optional. Head over to w3schools.com and try this property out.

• border-radius
  

  The border-radius property has been around for a long time but has become a w3c specification recently with the introduction of CSS3. The syntax for this property is really simple.

  border-radius: radius;

  radius is the border radius you want for your element. Usually is around 5px is good enough for good looks.

That's it! These two properties, when used creatively can turn an ugly website into a cool, professional looking one.