CSS 3 Tutorial – Rounded Corner and Shadow Border effect

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with 2 Comments on CSS 3 Tutorial – Rounded Corner and Shadow Border effect

Style the Border in HTML with the Help of CSS 3 Border Style

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:

border-radius:25px;
-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

  • dimitri

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

    • dimitri

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