CSS 3 Tutorial – Rounded Corner and Shadow Border effect

Previously we have seen the Transform Operations using CSS3. In this article i will depict the New Border Properties in CSS 3. With the help of CSS 3, we can perform following two operations on border :

  1. Rounded Corner/ Border
  2. Border Shadow

Live Demo – Click Here

1. Rounded Corner

Before CSS3, if you wanted to create the rounded corner border then it was not the straight job, it needed lots of programming stuff. There were alternatives like using sprite of images or jQuery plugins etc. However with the help of CSS 3 it is very straight as simple as shown below:

-moz-border-radius:25px; /* Firefox 3.6 and earlier */

Using Border-radius property we can achieve the result. But for IE first line will work and for Mozilla 2nd line of code will work from above code snippet.

CSS 3 Border - Rounded Corner
CSS 3 Border – Rounded Corner

2. Border Shadow
If you want to give some shadow effect to the borders then its what everyone was waited for:

Syntax :

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

box-shadow: 5px 5px 10px #888888;
CSS 3 Border - Shadow
CSS 3 Border – Shadow





Related Posts


2 responses to “CSS 3 Tutorial – Rounded Corner and Shadow Border effect”

  1. dimitri Avatar

    as far as i know, IE always had a problem with rounded corner

    1. dimitri Avatar

      for the shadow, this is the worked code:
      IE 8:    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=75)”;IE 5.5 – 7:    filter: alpha(opacity=75);

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading