css3 borders

one of the most keenly-anticipate css3 properties is border-radius, border-image, box-shadow. a web developer can used these border properties to design a element border.

the following css3 border properties -

  • border-radius
  • border-image
  • box-shadow

browser support

the examples on this page include browser-specific properties that start with extensions

(e.g -o-,-moz-,-ms-).this is for browser compatibility reasons.prefix look like as :-

         -o-         :prefix for opera.
         -ms-       :perfix for internet explorer.
         -moz-      :perfix for mozilla
         -webkit-   :perfix for safari or chrome.

border-radius

the border radius property is an efficient way of adding rounded corners to your borders.looks like -

   four rounded corners  

   Two rounded corners  

   four rounded corners,two with a radius of 30pixels and the other two with a radius of 120px  

   <html>

   <head>

   <title>this is demo how you can radius your element border </title>

   <style   type="text/css">

    .four_rounded_corners {
         border-radius:30px  ;      
         -o-border-radius:30px  ;    /*support opera browser  */
         -moz-border-radius:30px  ;    /*support mozilla firefox  */
         -ms-border-radius:30px  ;    /*support  internet explorer  */
         -webkit-border-radius:30px  ;   /*safari browser */
         background-color:#3a4b9c;
         color:white;
         padding:10px 10px;
         margin:10px 10px;
 
         }

    .two_rounded_corners {

  border-bottom-left-radius:30px;         border-bottom-right-radius:30px  ;

  -o-border-bottom-left-radius:30px;        -o-border-bottom-right-radius:30px  ;

  -moz-border-bottom-left-radius:30px;    -moz-border-bottom-right-radius:30px  ;

  -webkit-border-bottom-left-radius:30px-webkit-border-bottom-right-radius:30px ;

  -ms-border-bottom-left-radius:30px;       -ms-border-bottom-right-radius:30px  ;

         }

    .four_rounded_corners_with_deffervalue {

  border-bottom-left-radius:30px;     border-bottom-right-radius:130px  ;

  border-top-left-radius:130px;         border-top-right-radius:30px  ;

  -o-border-bottom-left-radius:30px;    -o-border-bottom-right-radius:130px  ;

  -o-border-top-left-radius:130px;         -o-border-top-right-radius:30px  ;

  -moz-border-bottom-left-radius:30px;    -moz-border-bottom-right-radius:130px  ;

  -moz-border-top-left-radius:130px;         -moz-border-top-right-radius:30px  ;

  -ms-border-bottom-left-radius:30px;        -ms-border-bottom-right-radius:130px  ;

  -ms-border-top-left-radius:130px;            -ms-border-top-right-radius:30px  ;

  -webkit-border-bottom-left-radius:30px-webkit-border-bottom-right-radius:130px  ;

  -webkit-border-top-left-radius:130px;         -webkit-border-top-right-radius:30px  ;

background-color:#3a4b9c;
               color:white;
               padding:10px 10px;
               margin:10px 10px; }

    </style>

    </head>

    <body>

    <div  class="four_rounded_corners" >

    <p>four rounded corners </p>   </div>

    <div   class="four_rounded_corners_with_differvalue">

    <p>four rounded corner two corner with 30px;and two corner with 130px; </p>  </div>

    </body>

    </html>


box shadow

the css box-shadow property is used for attaching one or more drop shadows to an html element.

look effect the box shadow propertys.

   <html>

   <head>

   <title>shadow boxes. </title>

   <style   type="text/css">

      .box_shadow {

             width:500px;  height:200px ;  

             margin:20px 20px; ;

            box-shadow:10px 10px 50px 10px #3a4b9c  ;

            -o-box-shadow:10px 10px 50px 10px #3a4b9c  ;

            -moz-box-shadow:10px 10px 50px 10px #3a4b9c  ;

            -webkit-box-shadow:10px 10px 50px 10px #3a4b9c  ;

            -ms-box-shadow:10px 10px 50px 10px #3a4b9c  ;}

       </style>  </head>

     <body>  <div  class="box_shadow" >

      <p>show the box-shadow effect </p>

      </div>

      </body>  </html>


border images:-

the border-image property is an efficient way of adding images to your borders.

the border-image property sets the border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat properties.

diamond shap real image.

the image is 81 by81 pixels and has to be divided into 9 equal parts.the style rules colud thus

   <html>

   <head>

   <title>shadow boxes. </title>

   <style   type="text/css">

      div {

             width:500px;  height:200px ;  

            border-image:url('/images/border_image.png')  ;

            -o-border-image:url('/images/border_image.png')  ;

            -moz-border-image:url('/images/border_image.png')  ;

            -ms-border-image:url('/images/border_image.png')  ;

            -webkit-border-image:url('/images/border_image.png')  ;

          } 

       </style>  </head>

     <body>  <div>

      <p>border-image property is used to set the image to your element border </p>

      </div>

      </body>  </html>


new border properties

propertydescriptioncss
border-radius

shorthand property for setting all the border radius

properties in one declaration.

css3
border-bottom-right-radius css3
border-bottom-left-radius css3
border-top-right-radius css3
border-top-left-radius css3
border-image

shorthand property for setting all border image properties

in one declaration.

css3
border-image-source css3
border-image-slice css3
border-image-width css3
border-image-outset   css3
border-image-repeat   css3
box-shadowattach one or more brop-shadows to the box.css3