Post
Ask Question

border-image property in CSS3

border-image property in CSS3

 
This property is used to set the Border Image. Only Internet Explorer does not support this property.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.   
  4.      <head>  
  5.           <style type="text/css">  
  6.           div   
  7.           {  
  8.                border-width: 12px;  
  9.                width: 300px;  
  10.                padding: 10px 30px;  
  11.           }  
  12.  
  13.           #round   
  14.           {  
  15.                border-image: url("circle.jpg") 20 20 round;  
  16.                /* For Google Chrome */  
  17.                -moz-border-image: url("circle.jpg") 20 20 round;  
  18.                /*For Mozilla Firefox */  
  19.                -webkit-border-image: url("circle.jpg") 20 20 round;  
  20.                /*For Safari */  
  21.                -o-border-image: url("circle.jpg") 20 20 round;  
  22.                /* For Opera */  
  23.           }  
  24.           </style>  
  25.      </head>  
  26.   
  27.      <body>  
  28.           <div id="round">My Name is Mahak Garg</div>  
  29.      </body>  
  30.   
  31. </html> 
Output:
 
1.png
Next Recommended Reading perspective-origin property of CSS3