Home › CSS border image

CSS border image 

James
Joined:
02/21/2009
Posts:
130

July 19, 2009 04:51:22    Last update: July 19, 2009 14:52:24
Ever wonder if you can use images as border in CSS? Actually this is part of CSS3: http://www.w3.org/TR/css3-background/#the-border-image. These properties are supported:

border-image
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

However, browser support is flaky at best. There is an example on css3.info, where they tell you that the fancy border was styled with (in accordance with the spec): 
border-image: url(border.png) 27 27 27 27 round round;


But the actual CSS looked like this: 
#left_column #border-image-1 {
margin: 0 30px;
width: 270px;
padding: 14px;
-o-border-image: url('/wp-content/uploads/2007/09/border.png') 27 27 27 27 round round;
-icab-border-image: url('/wp-content/uploads/2007/09/border.png') 27 27 27 27 round round;
-khtml-border-image: url('/wp-content/uploads/2007/09/border.png') 27 27 27 27 round round;
-moz-border-image: url('/wp-content/uploads/2007/09/border.png') 27 27 27 27 round round;
-webkit-border-image: url('/wp-content/uploads/2007/09/border.png') 27 27 27 27 round round;
border-image: url('/wp-content/uploads/2007/09/border.png') 27 27 27 27 round round;
border: double orange 1em
}

Such is the beauty of CSS!
Share |
| Comment  | Tags
 

Related Notes