How to draw a Rounded corners box ?

Many web developers in the past, places images instead of rounded corners , because the default appearance of the box borders pointed right-angled corners. But now the CSS3 border-radius property allows web designers to draw the rounded corners .

The border-radius shorthand property can be used to define all four corners simultaneously. If any value is set to zero, that corner will be square.

CSS rounded corners

Source

You can specify different values on each corner of the box.

output

CSS box corner

CSS Rounded Corners In All Browsers

In Firefox you need to use the -moz- prefix, that functions the same way as the standard CSS version.

CSS firefox

Inorder to set a different radius for each individual corner of your box, use like the following :

In order to set rounded corners properties in all browsers you can implement like the following:

CSS all browsers

How to draw a circle using CSS ?

Copy and paste the following source code to your html page, it will draw a circle in your html page.

output

CSS circle

How to draw a shadowed box ?

CSS shadowed box

The box-shadow CSS property can be used to define shadow effects in a box element.

Syntax:

box-shadow: x y blur radius color ;

  1. x - specifies the horizontal distance on the right of the box.
  2. y - specifies the vertical distance above the box.
  3. blur - the shadow will be sharp, the higher the number the shadow becomes bigger and lighter.
  4. radius - Positive values will cause the shadow to expand and grow bigger.
  5. color - color of the shadow

example

When you set the negative values in x and y the shadow will draw left and above the box.

shadow negative-values

In the above code the x and y set as negative values, so the shadow will draw on the left and above the box .

CSS Box shadow on one side

You can draw box shadow on one side using css

Shadow on bottom side

css shadow on bottom side

Shadow on left side

css shadow on left side

Shadow on right side

css shadow on right side

Shadow on top side

css shadow on top side

In order to set shadowed box properties in all browsers you can implement like the following: